Vue兄弟组件通信的三种方式

共计 436 个字符，预计需要花费 2 分钟才能阅读完成。

一、子传父，然后父传子
二、Vuex
三、创建一个事件总线
前两种方式官方文档十分详尽不再赘述，只在这里简述一下第三种方式的思路。因为 $on 和 $emit 的事件必须是在一个公共的实例上才能触发。那么我们可以新建一个 Vue 实例当作事件总线，达到可以不管组件之间的父子关系，都能通过这个实例通信的目的
1、新建 eventBus.js
import Vue from ‘vue’

export default new Vue()
2、Component1.vue 里监听事件
import {eventBus} from ‘eventBus.js’
//…
created () {
eventBus.$on(‘my-event’, args => {
//…
})
}
3、Component2.vue 中触发事件
import {eventBus} from ‘eventBus.js’
//…
watch: {
list(newValue, oldValue) {
eventBus.$emit(‘my-event’, nowValue)
}
}
四、完