Vue总线Bus兄弟组件传参
2018-10-15 15:13
253 查看
一、前言
使用场景:在vue项目较小的情况,使用bus总线思路来完成vuex的传值功能。
二、内容
[code]//bus.js import Vue from "vue"; const Bus = new Vue(); export default Bus; //组件A、组件B中分别引入Bus import Bus from "bus.js的路径"; //组件A中绑定事件,来接收组件B传来的数据 //绑定事件 Bus.$on("绑定事件",data=>{ console.log() }) //组件B中触发事件,将数据传递给组件A //触发绑定事件,进行兄弟组件间的参数传递 Bus.$emit("绑定事件",data); //组件A中使用 //解除绑定事件,一般在beforeDestory生命周期中使用 Bus.$off("绑定事件")
总结:
Vue-Bus是一种总线思想,即各个兄弟组件通过Bus(即Vue实例)进行参数传递!
阅读更多相关文章推荐
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 使用Vue开发网站之路2-多组件通信1(利用bus总线进行事件触发)
- vue - 组件间通信 之 中央事件总线bus
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 使用bus实现Vue组件间通信
- Vue之父子兄弟组件间通信
- 【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
- vue.js 兄弟组件传值
- vue2.0 兄弟组件数据传递方法
- VUE 简单父子组件,兄弟组件弹窗通信练习
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- vue-父子组件之间的通信以及兄弟组件的通信
- vue.js - 父向子组件传参(上)
- vue如何实现兄弟组件间值传递
- vue路由组件传参-页面通信
- vue-bus非父子组件之间触发事件
- vue.js - 子向父组件传参(下)