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
})
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值