vue2利用Bus.js如何实现非父子组件通信详解
2017-08-25 11:11
1261 查看
大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。下面话不多说了,来一起看看详细的介绍吧。
Bus.js可以是这样
import Vue from 'vue' export default new Vue()
在需要通信的组件都引入Bus.js
import Bus from '../common/js/bus.js'
添加一个button,点击后$emit一个事件
<button @click="toBus">子组件传给兄弟组件</button>
methods
methods: { toBus () { Bus.$emit('on', '来自兄弟组件') } }
另一个组件也import Bus.js 在钩子函数中监听on事件
import Bus from '../common/js/bus.js' export default { data() { return { message: '' } }, mounted() { Bus.$on('on', (msg) => { this.message = msg }) } }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue如何实现父子组件通信,以及非父子组件通信(待看)
- 利用node.js实现自动生成前端项目组件的方法详解
- Three.js利用Detector.js插件如何实现兼容性检测详解
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 详解如何在Vue2中实现组件props双向绑定
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- .NET如何利用timer组件实现每天定时执行某项任务 .
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- 使用Vue开发网站之路2-多组件通信1(利用bus总线进行事件触发)
- JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)
- 如何利用DOS批处理实现定时关机操作详解
- 利用Laravel事件系统如何实现登录日志的记录详解
- 如何利用js操作cookie实现记住密码功能
- Angular开发(十三)-服务的基本认识及利用服务实现组件间的通信
- Delphi 利用TComm组件 Spcomm 实现串行通信
- 如何在Vue2中实现组件props双向绑定
- linux下利用gsoap实现webservice通信方法详解
- 利用js、jQuery和css实现环形进度条组件封装