//單一事件管理組件通訊 ---同級組件之間的通信

時間 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