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

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

这里一共三步

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,.....);

Logo

前往低代码交流专区

更多推荐