Vue自定义监听事件
父子通信,兄弟通信,操作往往显得很繁琐,如果是两个爷孙之间,或者姑侄之间呢。。。。。因此需要有一种简单的方式来进行通信,公共参数也可以用来传数据,但不能触发调用远处的方法。$emitmain.js............var Event = new Vue();Vue.prototype.$event=Event;new Vue({render: h => h(App),}).$mount
·
父子通信,兄弟通信,操作配置往往显得很繁琐,如果是两个爷孙之间,或者姑侄之间呢。。。。。
因此需要有一种简单的方式来进行通信,公共参数也可以用来传数据,但不能触发调用远处的方法。
这里一共三步
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,.....);
更多推荐
已为社区贡献11条内容
所有评论(0)