单一事件中心管理组件通信( vuex )

有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

补充$emit ,$on的讲解

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //准备一个空的实例对象
        var Event=new Vue();

        var A={
            //ES6新写法
            template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);//触发事件，发送数据
                }
            },
            data(){
                return {
                    a:'我是a数据'
                }
            }
        };
        var B={
            //注意：一个组件是一个单个作用域，这里的a是局部变量，不是组件a里面的数据
            template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是b数据'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){   //生命周期(ready)挂载的时候调用
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){//监听事件，接收数据
                    this.a=a;
                }.bind(this));

                //接收B组件的数据
                Event.$on('b-msg',function(a){
                    this.b=a;
                }.bind(this));
            }
        };

        window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>
</html>

　对代码的个人理解：

1.　发送数据的组件里面

//ES6新写法
template:`
   <div>
      <span>我是A组件</span> -> {{a}}
      <input type="button" value="把A数据给C" @click="send">
   </div>
   `,
 methods:{
     send(){
          Event.$emit('a-msg',this.a);//触发事件，发送数据
      }
 },

2.　接收数据的组件里面

Event.$on('a-msg',function(a){//监听事件，接收数据
           this.a=a;
}.bind(this));

3.　ES6语法

//ES6新写法 ：`` 键盘Esc下面的键，数字1左边的键，里面字符串之间可以用空格
template:`
            <div>
                <span>我是A组件</span> -> {{a}}
                <input type="button" value="把A数据给C" @click="send">
            </div>
          `,