有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit(‘id-selected‘, 1)
// 在组件 B 创建的钩子中监听事件
bus.$on(‘id-selected‘, function (id) {
// ...
})
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue/vue.min.js"></script>
</head>
<body>
<div id="app8">
<ul>
<li><componenta/></li>
<li><componentb/></li>
</ul>
</div>
<script type="text/javascript">
var bus = new Vue();
Vue.component(‘componenta‘, {
template: ‘<div><input type="button" value="发布事件" @click="fabuevent" /></div>‘,
data:function () {
return {
counter: 0
}
},
methods:{
fabuevent:function(){
this.counter++;
bus.$emit(‘id-selected‘, this.counter);
}
}
});
Vue.component(‘componentb‘, {
template: ‘<div >{{counter}}</div>‘,
data:function () {
return {
counter: 0
}
},
created:function(){
var self=this;
bus.$on(‘id-selected‘, function (id) {
self.counter=id;
console.info("id:"+id);
})
}
})
var app8 = new Vue({
el:"#app8"
})
</script>
</body>
</html>
这里使用 created或者 beforeCreate 事件。
时间： 2024-12-14 21:18:09