Vue自定义监听事件

父子通信，兄弟通信，操作配置往往显得很繁琐，如果是两个爷孙之间，或者姑侄之间呢。。。。。

因此需要有一种简单的方式来进行通信，公共参数也可以用来传数据，但不能触发调用远处的方法。

这里一共三步

1、创建一个vue实例Event作为监听事件的载体,把它设置全局变量

（当然也可以不用这一步，直接用根vue作为载体，但不知道会不会对系统有什么影响）

main.js

......
......
var Event = new Vue();
Vue.prototype.$event=Event;
new Vue({
  render: h => h(App),
}).$mount('#app')

2、设置监听

如果你设置了第一步，如下设置监听：（如果没用过$on需要先自行学习一下，第一个是事件名，官网说系统会将该名字全部转为小写，而出现触发不到的情况）

//不传参数
this.$event.$on('event_name', () => {
  ......
  ......
});


//传参数
this.$event.$on('event_name', (arg1,arg2,...) => {
  ......
  ......
});

如果你没有设置第一步，如下设置监听：

//不传参数
this.$root.$on('event_name', () => {
  ......
  ......
});


//传参数
this.$root.$on('event_name', (arg1,arg2,...) => {
  ......
  ......
});

3、触发监听

//不传参数
this.$event.$emit('event_name');

//传参数
this.$event.$emit('event_name',arg1,arg2,.....);



//不传参数
this.$root.$emit('event_name');

//传参数
this.$root.$emit('event_name',arg1,arg2,.....);