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)
        }
    }
}