<!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>
</head>
<body>
<div id="app">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
//准备一个空的实例对象
var Event = new Vue(); //这是一个全局的，每个组件都可以访问
//单一事件管理组件通信
var A = {
template : `
<div>
<h2>我是A组件</h2>-----------{{a}}
<input type="button" value="把a的数据给c" @click="send">
</div>
`,
data() {
return {
a : '我是a里面的数据'
}
},
methods:{
send(){
//将事件发射出去，谁愿意接受，谁接受
Event.$emit('a-msg',this.a)
}
}
}
var B = {
template : `
<div>
<h2>我是B组件</h2>--------{{a}}
<input type="button" value="把b的数据给c">
</div>
`,
data() {
return {
a: '我是b里面的数据'
}
}
}
var C= {
template : '<h2>我是C组件----{{c}}</h2>',
data(){
return {
c : ''
}
},
mounted(){
// alert('c加载完毕')
Event.$on('a-msg',(a)=>{
this.c = a;
})
}
}
window.onload = function(){
new Vue({
el: '#app',
components: {
'com-a' : A,
'com-b' : B,
'com-c' : C
}
})
}
</script>
</body>
</html>
---总结一下：l利用一个全局实例对象，以便所有组件都可以方法，在比较简单同级组件之间的通讯时。
利用 //将事件发射出去，谁愿意接受，谁接受
Event.$emit('a-msg',this.a)
在需要数据的地方接受
Event.$on('a-msg',(a)=>{
this.c = a;
})
在es中箭头函数，this指向当前实例