vue2 中废弃了 $dispatch 和 $broadcast 广播和分发事件的方法.父子组件中可以用 props 和 $emit().如何实现非父子组件间的通信,可以通过实例一个 vue 实例 Bus 作为媒介,要相互通信的兄弟组件之中,都引入 Bus,之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递.
首先需要在任意地方添加一个 bus.js
在 bus.js 里面 写入下面信息
import Vue from 'vue'export
default new Vue;
在需要通信的组件都引入 Bus.js
如果你的 bus.js 是自定义一个 bus 的文件那 from 后面就改成你的所放的位置
1 import Bus from'. / bus.js'
接下来就是要组件通信了
添加一个 触发 #emit 的事件按钮
<template>
<div id="emit">
<button @click="bus">按钮</button>
</div>
</template>
import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
},
export default {
methods: {
bus () {
Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
}
}
}
}
打开要和 $emit 通信的另外一个组件 添加
在钩子函数中监听 msg 事件
<template>
<div id="on">
<p>{{message}}</p>
</div>
</template>
import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
},
mounted() {
Bus.$on('msg', (e) => {
this.message = msg
})
}
}
最后 p 会显示来自 $emit 传来的信息
来源: http://www.bubuko.com/infodetail-2462552.html