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

需求：通过 vue 中的 $emit 和 $on 方法进行数据的发送和接收
（1）、有A，B，C三个组件，同时挂载到入口组件中。
（2）、将A组件中的数据传递到C组件，再将B组建中的数据传递到C组件。

1、创建一个 vue 实例，里面包含 vue 的全部方法。

2、创建 A 组件，在 A 组件中通过点击事件，将数据通过 $emit 方法传递出去。

send(){
　　// $emit('A事件数据名称', 数据)
　　Event.$emit('a-msg', this.a);
}

3、创建 B 组件，在 B 组件中通过点击事件，将数据通过 $emit 方法传递出去。

send(){
　　// $emit('B事件数据名称', 数据)
　　// console.log(this);
　　Event.$emit('b-msg', this.b);
}

4、创建 C 组件，在 C 组件中通过生命周期的 mounted 钩子函数渲染数据。

mounted(){
　　// 接收A的数据
　　// $on('A事件数据名称', fn(a))
　　Event.$on('a-msg', (a)=>{
　　　　this.a = a;
　　});
　　// 接收B的数据
　　Event.$on('b-msg', (b)=>{
　　　　this.b = b;
　　});
}

整体代码如下：

    <div id="app">
        <dom-a></dom-a>
        <dom-b></dom-b>
        <dom-c></dom-c>
    </div>
    <!-- 
        $emit和$on进行组件之间的传值
        注意：$emit和$on的事件必须绑定在一个公共的实例上，才能够触发
        需求：
            1、有A，B，C三个组件，同时挂载到入口组件中
            2、将A组件中的数据传递到C组件，再将B组建中的数据传递到C组件
     -->
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        // 创建一个vue实例，里面包含vue的全部方法
        var Event = new Vue();
        var A ={
            data(){
                return{
                    a:'我是A组件的数据'
                }
            },
            template:` 
                <div>
                    <span>我是A组件的数据-> {{a}}</span>
                    <input @click='send' type="button" value="把A数据传给C" />
                </div>
            `,
            methods:{
                send(){
                    // $emit('A事件数据名称', 数据)
                    // console.log(this);
                    Event.$emit('a-msg', this.a);
                }
            }
        };
        var B ={
            data(){
                return{
                    b:'我是B组件的数据'
                }
            },
            template:` 
                <div>
                    <span>我是B组件的数据-> {{b}}</span>
                    <input @click='send' type="button" value="把B数据传给C" />
                </div>
            `,
            methods:{
                send(){
                    // $emit('B事件数据名称', 数据)
                    // console.log(this);
                    Event.$emit('b-msg', this.b);
                }
            }
        };
        var C = {
            template:` 
                <div>
                    <h3>我是C组件</h3>
                    <span>接收A组件的数据-> {{a}}</span>
                    <br/>
                    <span>接收B组件的数据-> {{b}}</span>
                </div>
            `,
            data(){
                return{
                    a:'',
                    b:''
                }
            },
            mounted(){
                // 接收A的数据
                // $on('A事件数据名称', fn(a))
                Event.$on('a-msg', (a)=>{
                    this.a = a;
                });
                // 接收B的数据
                Event.$on('b-msg', (b)=>{
                    this.b = b;
                });
            }
        };
        new Vue({
            el:'#app',
            components:{
                'dom-a': A,
                'dom-b': B,
                'dom-c': C
            }
        });
    </script>