Vue组件通信之Bus的具体使用
2017-12-28 10:56
1076 查看
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里。
在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是:
因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。
官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。
vue官方文档中有这样一个定义:非父子组件的通信,内容很少,如下:
其实关于这个非父子组件通信的demo还是有的,它藏在了$dispatch 和 $broadcast的迁移文档中,有兴趣的小伙伴可以点击进去查看。文档中的建议就是:
对于$dispatch 和 $broadcast最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。
这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:
app.js
var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus);
然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:
分发事件的组件
// ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //params是传递的参数 //... } }
监听的组件
// ... created() { this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作 //todo something }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); },
如果需要监听多个组件,只需要更改 bus 的 eventName:
// ... created() { this.$bus.$on('firstTodo', this.firstTodo); this.$bus.$on('secondTodo', this.secondTodo); }, // 清除事件监听 beforeDestroy () { this.$bus.$off('firstTodo', this.firstTodo); this.$bus.$off('secondTodo', this.secondTodo); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue组件 $children,$refs,$parent的使用详解
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- Vue组件tree实现树形菜单
- Vue组件之全局组件与局部组件的使用详解
- 详解利用jsx写vue组件的方法示例
- 在vue组件中使用axios的方法
- vue组件如何被其他项目引用
- vue组件中点击按钮后修改输入框的状态实例代码
- vue组件实现文字居中对齐的方法
- Vue组件选项props实例详解
- vue组件中使用iframe元素的示例代码
- 使用Vue组件实现一个简单弹窗效果
- 详解vue组件通信的三种方式
- 在Vue组件上动态添加和删除属性方法
- 通过npm引用的vue组件使用详解
- vue组件实现可搜索下拉框扩展
- Vue组件BootPage实现简单的分页功能
- 从零开始封装自己的自定义Vue组件
相关文章推荐
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 使用Vue开发网站之路2-多组件通信1(利用bus总线进行事件触发)
- 使用bus实现Vue组件间通信
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue event bus 非父子组件间通信问题
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- vue - 组件间通信 之 中央事件总线bus
- Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用
- 使用Vue开发网站之路2-多组件通信3(父子间通信,组件与vue通信)
- Vue 兄弟组件通信(不使用Vuex)
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- vue组件jsx语法的具体使用
- Vue 兄弟组件通信(不使用Vuex)
- Android EventBus组件间通信的使用及详解
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue 兄弟组件通信的方法(不使用Vuex)
- vue1.0与vue2.0区别之组件通信