vue组件通信

一、父组件向子组件传值：

父组件在子组件身上通过自定义属性传值，子组件通过props接收值。

子组件在接收数据的时候有两种方式。

1.数组的形式：这种形式直接在[]中写'自定义属性名'

2.对象的形式：这种形式相对于msg来说增加了数据类型的验证{‘自定义属性名’：数据类型}，这种形式要求父组件传过来的数据必须与这个数据类型相同，否则就会报错。增加了必传属性，required属性值是true的话，要求父组件必须传值，不传会报错。

props:[msg]
props:{msg:Array}
props:{msg:{type:Array;required:true}}

二、子组件向父组件传值：

父组件在子组件身上绑定一个自定义事件，子组件内部用emit触发这个事件，并将参数传递给父组件。

父组件给子组件身上加一个自定义的datachange事件，在methods中定义事件处理函数，事件处理函中可以拿到来自子组件的数据。

<template>
    <div id='app'>
        <Son @datachange:'getmsg' />
    </div>
</template>
export default {
    methods:{
        getmsg:function(res){
        //这里可以拿到来自子组件的数据
            console.log(res)
    }
}
}

子组件中用emit来触发这个datachange事件，一般写在mounted中，emit的第一个参数就是你要触发的事件名称，第二个参数就是你要给父组件传的数据。可以不传数据，也可以只传一个或传多个，如果是多个数据，可以以数组或对象的形式传。

export default {
    data(){
        return {
            goods:['矿泉水']
        }
    }，
    mounted(){
        this.$emit('datachange',this.goods)//（事件名称，要传的数据）
    }
}

三、兄弟组件通信：

需要创建一个空vue实例作为通信桥梁，在需要接收数据的组件中用实例.$on()监听自定义事件，在回调函数中处理传递过来的参数（注意回调函数中this的处理），在需要传值的组件中用实例.$emit()触发自定义事件，并传递数据。

1.创建空实例：可以在src下创建一个eventBus文件夹，创建一个event.js文件

//导入vue
import Vue from 'vue'
var vm = new Vue()
export default vm

2.在需要接收数据的组件1中监听自定义事件

export default {
    data(){
        return {
            msg:''
        }
    }
    mounted(){
        vm.$on('sendData',function(d){
            this.msg=d
        }.bind(this))
    }
}

3.在需要传值的组件2中触发自定义事件并传参

export default {
    data(){return{storelist:['魏家凉皮']}}
    mounted(){
        vm.$emit('sendData',`这是子组件2的数据：${this.storelist}`)
    }
}

为了检测数据是否接收成功，我们可以将触发自定义事件写在点击事件的事件处理函数中，当我们点击的时候，就会传数据，组件1接收到数据后保存并显示到页面上。

 

如图我们点击按钮，就可以将组件2中的数据传到组件1。（点击按钮触发自定义事件）

 

兄弟组件之间传数据还有另外一种思路：可以先由子组件1将数据传给父组件，父组件再将数据传给子组件2，这样就实现了子组件1和子组件2之间的数据通讯。

四、跨组件通讯：

当需要通信的组件之间是嵌套关系，并且中间还隔着其他组件，那么这两个组件通信需要借助provide和inject。外层组件通过provide传值，内层组件通过inject接收值。

//外层组件
provide(){return {'msg':''}}
//内层组件
inject:['msg']