Vue 非父子組件之間的通信

 

實現非父子組件之間的通信，有以下幾種方式

• Bus總線。創建一個空的Vue對象作為Bus中央事件總線（中間組件）。

• vuex（適合大型項目，小項目效果不明顯）

• provide/inject（同根往下派發）

• 本地存儲

 第一種是最常用的，此處只介紹第一種。

 

 

bus總線實現非父子組件之間的通信

<div id="app"></div>
        
        
    <script>
        // 創建一個空的Vue對象作為bus中央事件總線
        Vue.prototype.$bus=new Vue();
        
        Vue.component('MyHeader',{
            template:`
                <div>
                    <p>this is the header area</p>
                    <button @click="send">向body傳遞數據</button>  <!--調用的函數可以帶參數-->
                </div>
            `,
            methods:{
                send(){ //可帶參數
                    this.$bus.$emit("received","hello")  //觸發一個自定義事件，該事件可以攜帶0、1、多個數據。事件、數據都放在bus總線中
                }
            }
            
        })
    
    
        Vue.component('MyBody',{
            template:`
                <div>
                    <p>this is the body area</p>
                    <p>來自header的數據：{{msg}}</p>  <!-- 展示接收到的數據 --->
                </div>        
            `,
            data(){
                return{
                    msg:''
                }
            },
            created(){  //在created(){}中寫監聽
                //寫法一
                //var self=this;  //直接用this沒效果，需要把this賦給一個臨時變量，使用臨時變量代替this
                //在bus總線中注冊一個事件監聽，當指定的事件發生時會調用對應的函數
                //self.$bus.$on('received',function(val){  //此處使用匿名函數
                //    self.msg=val; 
                //});
                
                //寫法二
                this.$bus.$on('received',val=>{  //使用ES6的箭頭函數，這種方式可以直接使用this。更簡潔，推薦。
                    this.msg=val;
                })
            }
        })
        
            
        new Vue({
            el:'#app',
            template:`
                <div>
                    <my-header></my-header>
                    <my-body></my-body>
                </div>
            `,
        });
        
    </script>

 

 

 

說明

第一種寫法原本是這樣的：

this.$bus.$on('received',function(val){  
     this.msg=val; 
 });

我們想要的是2個this都應該是指向當前組件的，這樣this.msg才能獲取到當前組件的msg變量。

但實際上，第二個this（函數體中的那個this），指向的bus總線，this.$bus  當前對象已經變成了bus總線，所以要借助一個臨時變量。

 

 

第二種寫法：

箭頭函數不改變作用域，2個this都是指向當前組件，可以直接使用this。