vue使用Bus.js简单实现非父子组件通信(非常简单)

vue2中废弃了dispatch和dispatch和dispatch和broadcast广播和分发事件的方法。父子组件中可以用props和 e m i t ( ) 。 如 何 实 现 非 父 子 组 件 间 的 通 信 , 可 以 通 过 实 例 一 个 v u e 实 例 B u s 作 为 媒 介 , 要 相 互 通 信 的 兄 弟 组 件 之 中 , 都 引 入 B u s , 然 后 通 过 分 别 调 用 B u s 事 件 触 发 和 监 听 来 实 现 通 信 和 参 数 传 递 。 B u s . j s 可 以 是 这 样 i m p o r t V u e f r o m ′ v u e ′ c o n s t B u s = n e w V u e ( ) e x p o r t d e f a u l t B u s 在 需 要 通 信 的 组 件 都 引 入 B u s . j s i m p o r t B u s f r o m ′ . . / c o m m o n / j s / b u s . j s ′ 添 加 一 个 b u t t o n , 点 击 后 emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。 Bus.js可以是这样 import Vue from 'vue' const Bus = new Vue( ) export default Bus 在需要通信的组件都引入Bus.js import Bus from '../common/js/bus.js' 添加一个button,点击后 emit()vueBusBusBusBus.jsimportVuefromvueconstBus=newVue()exportdefaultBusBus.jsimportBusfrom../common/js/bus.jsbuttonemit一个事件
<button @click=“toBus”>子组件传给兄弟组件
methods
methods: {
toBus () {
Bus.KaTeX parse error: Expected 'EOF', got '}' at position 26: … '来自兄弟组件') }̲ } 另一个组件也impo…on(‘on’, (msg) => {
this.message = msg
})
}
}

猜你喜欢

转载自blog.csdn.net/MJ1314MJ/article/details/109024299