//单一事件管理组件通讯 ---同级组件之间的通信

时间 2019-11-18

原文原文链接

<!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)html

在须要数据的地方接受
Event.$on('a-msg',(a)=>{
this.c = a;
})vue

在es中箭头函数，this指向当前实例node