<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.app {
display: flex;
}
.app div {
flex: 1;
}
</style>
</head>
<body>
<div id='app' class='app'>
<div>
<child-a></child-a>
</div>
<div>
<child-b></child-b>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 事件总线，通过“订阅-发布”模式实现组件之间的直接通信
1.首先创建一个空的vue实例
var bus = new Vue()
它身上有两个方法实现组件之间的通信，bus.$emit(频道，数据)定义 在组件的methods中，用来向其他组件发送消息，bus.$on(频道，数据)用来接收其他组件发来的消息，定义在生命周期的created或者mounted钩子函数中。
// bus.$emit('频道') 发送消息
// bus.$on('频道') 收到消息
当两个组件发送数据的频道和接收消息的频道相同就可以实现组件之间的双向通信了
Vue.component('child-a', {
data: function() {
return {
msg: '',
html: ''
}
},
template:`
<div>
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
//给输入框和button按钮都绑定send事件，当监听到键盘enter事件或按钮点击事件，执行事件函数send
<div v-html='html'></div>
</div>
`,
methods: {
send() {
// 发送消息
bus.$emit('A', this.msg)
子组件a广播了一件非定向消息，消息内容为msg,msg就是输入框中的内容。广播频道为A，
子组件b要接收这条消息，就要监听广播频道A
this.msg = ''
}
},
created() {
var that = this
普通函数会改变this指向
bus.$on('B', function(msg) {
子组件a监听频道B的消息，并执行回调函数，将消息内容渲染到div中
that.html += '<div>B说：'+msg+'</div>'
that指向组件实例，可以调用组件上的属性和方法
})
}
})
Vue.component('child-b', {
data: function() {
return {
msg: '',
html: ''
}
},
template:`
<div>
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
<div v-html='html'></div>
</div>
`,
methods: {
send() {
bus.$emit('B', this.msg)
this.msg = ''
}
},
created() {
var that = this
bus.$on('A', function(msg) {
//监听的频道，收到消息后的回调函数
that.html += '<div>A说：'+msg+'</div>'
})
}
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
效果实例
HTML结构
