vue兄弟组件通信

Posted 2020-12-28 coconutgirl

所有需要通信的组件共用一个事件对象。new Vue()，新new一个vue对象，然后所有组件都访问这个对象，通过这个对象$emit事件，也通过这个对象$on监听事件。

实现一：直接在单文件里面实例化根Vue的时候，在data里return一个属性，值为new Vue()，例如bus: new Vue()

在具体的组件页面上，直接用this.$root.bus.$emit(‘eventName‘)发送事件。

在另一个组件页面的mounted函数里面，用this.$root.bus.$on(‘eventName‘, () => { // 一些要做的事  } )监听事件。

实现二：把共用的事件对象单独抽成一个bus.js文件，哪个组件要用到就引用进来，然后$emit或者$on。

实现三：抽成bus.js文件后，还可以作为Vue的插件。