vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信

$emit和$on进行组件之间的传值

注意： $e m i t 和$ on的事件必须在一个公共的实例上，才能够触发

需求：

1.有A，B，C三个组件，同时挂载到入口组件中

2.将A组件中的数据传递到C组件，再将B组件中的数据传递到C组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Vue2-单一事件管理组件通信</title></head>
<body><div id="app"><dom-a></dom-a><dom-b></dom-b><dom-c></dom-c>   </div><script src="vue.js"></script><script>//准备一个空的实例对象var Event = new Vue();console.log(Event);//组件Avar A = {template: `<div><span>我是A组件的数据->{{a}}</span><input type="button" value="把A数据传给C" @click = "send"></div>`,methods: {send () {alert(1);console.log(this);Event.$emit("a-msg", this.a);}},data () {return {a: "我是a组件中数据"}}};//组件Bvar B = {template: `<div><span>我是B组件的数据->{{a}}</span><input type="button" value="把B数据传给C" @click = "send"></div>`,methods: {send () {Event.$emit("b-msg", this.a);}},data () {return {a: "我是b组件中数据"}}};//组件Cvar C = {template: `<div><h3>我是C组件</h3><span>接收过来A的数据为: {{a}}</span><br><span>接收过来B的数据为: {{b}}</span></div>`,mounted () {alert(2);//接收A组件的数据Event.$on("a-msg", (a)=> {this.a = a;});//接收B组件的数据Event.$on("b-msg",  (b)=> {this.b = b;});},data () {return {a: "",b: ""}}};new Vue({el: "#app",components: {'dom-a':A,'dom-b':B,'dom-c':C}});</script></body>
</html>