Vue兄弟组件之间的通信(EventBus)
2017-08-08 15:17
661 查看
在开发中,不可避免的要碰到需要兄弟组件之间相互通信的地方,在Vue的1.0版本中,我曾经采取的方式是通过两个兄弟组件的共同父级进行通信。主要用到$dispatch和$broadcast这两个方法。但在如今的2.0版本中 ,这两个方法已经废弃,而且在我看来依靠这种方式来实现本身也不够优雅。 所幸2.0版本中为我们提供了新的实现方式。下面就来简单介绍下这种方式,即EventBus var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... }) 其实就是两个组件共享一个Vue的实例,其中一个组件触发事件,另一个组件监听事件后触发回调函数。
相关文章推荐
- vue 兄弟组件之间传数据之$emit 和 $on 组件通信
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制、slot传值
- vue组件之间的通信
- 关于Vue父子组件之间的通信
- Vue2.0 父子组件之间通信
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Vue.js组件之同级之间的通信
- vue2.0组件之间的通信
- vue2.0s中eventBus实现兄弟组件通信
- VUE(一)组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
- Vue项目实战(四)- 组件之间的通信
- vue 组件之间的通信(父子、非父子)
- Vue 兄弟组件通信(不使用Vuex)
- vue组件之间的多种通信方法
- vue2.0父子组件以及非父子组件之间通信
- 浅谈组件之间的通信—EventBus
- vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信