vue 兄弟组件之间传数据之$emit 和 $on 组件通信_综合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Vue2-单一事件管理组件通信</title><script src="vue.js"></script><script type="text/javascript">//准备一个空的实例对象var Event = new Vue();//组件Avar A = {template: `<div><span>我是A组件的数据->{
   {a}}</span><input type="button" value="把A数据传给C" @click = "send"></div>`,methods: {send () {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 () {//接收A组件的数据Event.$on("a-msg", function (a) {this.a = a;}.bind(this));//接收B组件的数据Event.$on("b-msg", function (a) {this.b = a;}.bind(this));},data () {return {a: "",b: ""}}};window.onload = function () {new Vue({el: "#box",components: {"dom-a": A,"dom-b": B,"dom-c": C}});};</script>
</head>
<body><div id="box"><dom-a></dom-a>      <dom-b></dom-b>      <dom-c></dom-c>      </div></body>
</html>