vue的3种组件通信方式

1.父传子:通过自定义属性传送数据

//父组件
<Son :msg="message" :user="userInfo" ></Son>
export default {
    data(){
        return{
            message:"hello",
            userInfo:{
                name:"用户名",
                password:"密码"
            }
        }
    }
}

//子组件
<template>
    <div>
        msg:{{msg}}
        user:{{user}}
    </div>
</template>

props:['msg','user']

2.子传父：通过自定义事件传递数据

//子组件
export default {
    data(){
        return{
            count = 0,
        }
    },
    methods:{
        add(){
            this.count++;
            //修改数据时通过$emit()触发自定义事件
            this.$emit('numchange',this.count);
        }
    }
}

//父组件
<Son @numchange="getCount"></Son>
export default {
    data(){
        return{
            countFromSon:'',
        }
    },
    methods:{
        getCount(val){
            this.countFromSon = val
        }
    }
}

3.兄弟组件互传：通过eventBus传送数据

数据发送方A：

import bus from './eventBus.js'  
export{
    data(){
        return{
            msg:"hello"
        }
    },
    methods:{
        send(){
            bus.$emit('share',this.msg)
        }
    }
}  

EventBus.js:

import Vue from 'vue'

export default new Vue()

数据接收方B:

import bus from './eventBus.js'  
export{
    data(){
        return{
            msgFromA:""
        }
    },
    created:{
        send(){
            bus.$on('share',(val)=>{
                this.msgFromA = val;
            })
        }
    }
}