var eventHub=new Vue()
- 使用eventHub.$on和eventHub.$off来监听和关闭事件监听,使用eventHub.$emit来触发事件.
<div id="app">
<com1></com1>
<com2></com2>
<hr>
<input type="button" value="点击关闭对所有事件的监听" @click="off">
</div>
<template id="tmp1">
<div>
<p>组件1</p>
<p>{{num}}</p>
<input type="button" value="点击修改组件2的值" @click="update1">
</div>
</template>
<template id="tmp2">
<div>
<p>组件2</p>
<p>{{num}}</p>
<input type="button" value="点击修改组件1的值" @click="update2">
</div>
</template>
<script>
var hub = new Vue();
var com1 = {
template: "#tmp1",
data() {
return {
num: 0
}
},
methods: {
update1() {
hub.$emit('func2', 1);
}
},
mounted() {
hub.$on('func1', (val) => {
this.num += val;
})
}
};
var com2 = {
template: '#tmp2',
data() {
return {
num: 0
}
},
methods: {
update2() {
hub.$emit('func1', 5);
}
},
mounted() {
hub.$on('func2', (val) => {
this.num += val;
})
}
};
var vm = new Vue({
el: "#app",
data: {},
methods: {
off() {
hub.$off('func1');
hub.$off('func2');
}
},
filters: {},
directives: {},
components: {
com1,
com2
},
watch: {},
computed: {}
});
</script>
- 如上代码所示.子组件1挂载完毕后即开始监听自定义事件func1,并传入值1.子组件2挂载完毕后即开始监听自定义事件func2,并传入值5.
- 子组件1中通过点击按钮调用本地函数update1,从而触发自定义事件func2,因为子组件2一直在监听自定义事件func2,也因此通过触发事件func2来达到向子组件2传入数据的目的.其逻辑为 子组件2监听事件func2---->子组件1触发事件func2,并在触发阶段传值给子组件2的监听函数---->子组件2的监听函数将传入数值本地处理.
- 子组件2的传值原理同上.
- 传值是在触发事件阶段.
