vue---元件間傳遞訊息(父子傳遞訊息，兄弟傳遞訊息)

一. 簡述

有時候我們需要使用到元件間的傳遞訊息，來達到我們想要效果。比如以下場景，A下包含B1,B2，他們之間可以相互通訊。

二. 實現方法

上面那個圖包含兩中通訊方式，父子通訊，兄弟通訊。我們首先實現父子通訊，其次在實現兄弟通訊。

2.1 父子通訊

B1，B2元件定義props屬性，來接受父元件傳遞過來的值。B1，B2想要給A傳遞訊息，需要通過this.$emit函式來傳遞訊息。A元件需要處理來接受子元件this.$emit函式。

// A 檔案
<div>
    <p>{{receiveMsgB1}}</p>
    <p>{{receiveMsgB2}}</p>
    <my-info :message="infoMessage" @sendInfo="receiveMessageB1"></my-info>
    <my-list :message="listMessage" @sendInfo="receiveMessageB2"></my-list>
</div>
export default {
    data:function(){
        return {
            infoMessage:'測試1',
            listMessage:'測試2',
            receiveMsgB1:'',
            receiveMsgB2:''
        }
    },
    methods:{
        receiveMessageB1:function(val){
            this.receiveMsgB1 = val
        },
        receiveMessageB2:function(val){
            this.receiveMsgB2 = val
        }
    }
}

// B1 檔案,B2檔案實現方法類似
<div>
   <p>{{message}}</p>
   <input v-model="inputMessage"></input>
   <button @click="sendMessage">傳遞訊息</button>
</div>
export default {
    props:{
        message:{
            type:String,
            default:''
        }
    },
    data:function(){
        return {
            inputMessage:''
        }
    },
    methods:{
        sendMessage:function(){
            this.$emit('sendInfo',this.inputMessage) //第一引數自定義事件，第二引數就是傳遞訊息
        }
    }
}

2.2 兄弟間通訊

實現思路有兩種方法：第一種藉助父元件A來傳遞訊息；第二種通過Vuex(狀態管理器)的store來傳遞訊息；第三種通過eventBus傳遞訊息

第一種方法：很簡單。

// A 檔案
<div>
    <p>{{receiveMsgB1}}</p>
    <p>{{receiveMsgB2}}</p>
    <my-info :message="receiveMsgB2" @sendInfo="receiveMessageB1"></my-info>
    <my-list :message="receiveMsgB1" @sendInfo="receiveMessageB2"></my-list>
</div>
export default {
    data:function(){
        return {
            receiveMsgB1:'測試1',
            receiveMsgB2:'測試2'
        }
    },
    methods:{
        receiveMessageB1:function(val){
            this.receiveMsgB1 = val
        },
        receiveMessageB2:function(val){
            this.receiveMsgB2 = val
        }
    }
}

第二種方法：需要配置vuex狀態管理器。

第三種方法：通過eventBus傳遞訊息

// main.js檔案
let bus = new Vue()
Vue.prototype.bus = bus

// B1 元件
<template>
    <div>
        <p>{{msg}}</p>
        <input v-model="message"></input>
        <button @click="sendMsg">向B2傳送訊息</button>
    </div>
</template>
export default {
    data:function(){
        return {
            msg:'',
            message:'測試1'
        }
    },
    mounted:function(){
        this.bus.$on('toChangeMsgToB1',function(val){
            this.msg = val
        })
    },
    methods:{
        sendMsg:function(){
            this.bus.$emit('toChangeMsgB2',this.message)
        }
    }
}

// B2 檔案
<template>
    <div>
        <p>{{msg}}</p>
        <input v-model="message"></input>
        <button @click="sendMsg">向B2傳送訊息</button>
    </div>
</template>
export default {
    data:function(){
        return {
            msg:'',
            message:'測試1'
        }
    },
    mounted:function(){
        this.bus.$on('toChangeMsgToB2',function(val){
            this.msg = val
        })
    },
    methods:{
        sendMsg:function(){
            this.bus.$emit('toChangeMsgToB1',this.message)
        }
    }
}