标签：方式 export template temp 简单 rop callback lis style
在Vue开发中会遇到大量的组件之间共享数据的情形，针对不同的情形，Vue有相对应的解决方案。比如，父组件向子组件传值可以使用props，复杂项目中不同模块之间传值可以使用Vuex。但是，对于一些简单的项目里的非父子组件来说，它们一方面不适用props，另一方面又没有必要使用Vuex，针对这种情形可以使用中央事件总线（Event Bus）来解决问题。
1、创建中央事件总线
可以使用多种形式创建Event Bus。
Example 1：
// main.js import Vue from ‘vue‘; window.eventBus = new Vue(); // 注册全局事件对象 // 也可以修改Vue的原型链 Vue.prototype.$event = new Vue();
Example 2:
// ./event/moduleEvent.vue <tempalte> </template> <script> import Vue from ‘vue‘; export default new Vue({ data () { } }) </script> // main.js import moduleEvent from ‘./event/moduleEvent‘; Vue.prototype.$event = moduleEvent;
Example 3:
// Example 2 中的创建eventBus的vue文件改为js文件，main.js不变 // ./event/moduleEvent.js inport Vue from ‘vue‘; export const moduleEvent = new Vue(); // main.js import moduleEvent from ‘../event/moduleEvent‘; Vue.prototype.$event = moduleEvent;
2、使用中央事件总线传值
先在组件A中发射事件：
// moduleA.vue methods: { sendData () { // 通过修改Vue原型链的方式注册 this.$event.$emit(‘dataFromA‘, this.dataA); // 直接注册在window上 // moduleEvent.$emit(‘dataFromA‘, this.dataA); } }
然后就可以在组件B中接收了。组件B可以与组件A是父子、兄弟等等任意关系。
// moduleB.vue methods: { getData () { // 通过修改Vue原型链的方式注册 this.$event.$on(‘dataFromA‘, function (data) { // handle data code // 回调函数的参数data即为组件A传递的值 }); // 直接注册在window上 // moduleEvent.$emit(‘dataFromA‘, function (data) { // handle data code // 回调函数的参数data即为组件A传递的值 // }); } }
3、单次接收事件或者移除事件Listeners
如果你只想监听一次该事件。可以使用 this.$event.$once(channel: string, callback(payload1, payload2, ...))，事件触发一次后将移除事件。
如果你想移除自定义事件监听器，你可以使用 this.$event.$off([event, callback]); 来实现。该方法如果没有提供参数，则移除所有的事件监听器；如果只提供事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。
标签：方式 export template temp 简单 rop callback lis style
原文地址：https://www.cnblogs.com/zhengxj1991/p/9722309.html
