eventBus
eventBus的原理就是利用了组件间的子传父值,通过一个空的组件来作为子组件,一个触发绑定绑定的事件,一个给 eventBus 绑定事件,来通过函数的参数传入数据
创建一个空的实例
eventBus.js
//导入 vue 构造函数
import vue from 'vue';
//向外暴露一个空的 vue 实例
export default new vue()
接收方给 eventBus 绑定事件,同子传父值,父组件给子组件绑定事件
siblingB.vue
//导入eventBus
import eventBus from './eventBus.js'
//添加事件
//Vue除了给标签绑定事件外,还可以通过 $on 来绑定事件
//eventBus.$on('自定义事件名',事件处理函数)
eventBus.$on('share',(value)=>{
value 就是传入的数据
})
发送方触发eventBus的绑定世界按,同子传父值,子组件触发父组件绑定的自定义事件
siblingA.vue
//导入 eventBus
import eventBus from './eventBus.js'
//在合适的时机触发 $emit 方法,同子传父值,通过 $emit 发送数据
eventBus.$emit('触发的事件名',传入的数据1,传入的数据2...)
即可完成兄弟间组的传值
一共三种传值:
1.父传子值,使用的是自定义属性
2.子传父值,使用的是自定义的方法
3.兄弟间传值,使用的是eventBus,也是自定义方法的一种实现