[JavaScript知识库]常用的vue组件传值

一般vue的组件之间的传值分为：父组件传子组件，子组件传父组件，任意组件之间传值。

1.父组件传子组件:（父组件通过v-bind（可以缩写为 ：）发送，子组件通过props接收）

//父组件中引入子组件B
<B v-bind:msg="msg"></B>

import B from './B.vue'
data(){
    return{
        msg:'父组件给给子组件B的值'
    }
}，
components:{
    B
}

//子组件B,通过props接收，可以通过数组接收，也可以通过对象形式接收。
props:['msg']  
或者   
prop:{
    msg:{
        type:String,      //数据的类型
        default:"",       //设置数据默认值
        required:true     //设置数据必填，如果没有传入，就会报错。
    }
}

注意：通过props接收的参数是只读的，不能修改。如果需要修改，则需要讲它赋值给自己data中的变量，再修改。

2.子组件传父组件：（使用自定义事件，实现传值）

子组件内：通过$emit发送。

//假如在sure方法中发送值：
data(){
    return{
        count:'10'
    }
}，
methods:{
    sure(){
        this.$emit('toParent',this.count);  //toParent是自定义事件名，this.count是需要给父组件的值
    }
}

父组件内：在实例化的子组件中，通过子组件内定义的自定义事件函数接收。

//在父组件中，引入并实例化子组件，并在实例化标签中通过子组件内定义的自定义事件接收值
<子组件 @toParent="getData"></子组件>

data(){
    return{
        countFromSon:'',
    }
}，
methods:{
    getData(val){   //参数val就是子组件给父组件传来的值
        this.countFromSon=val;
    }
}

注意：假如在父组件实例化子组件的标签内，通过自定义事件定义的方法中有形参row，如：

<子组件 @toParent="getData(row)"></子组件>

那么在getData方法中接收来自子组件的数据时，就需要用到第二个默认参数$event，如：

getData(val,$event){ ? 此时的$event才是来自子组件的值，而val是事件方法中携带的row形参
? ? ? ? this.countFromSon=$event;
}

3.任意组件之间传值：(通过中间量，结合$emit和$on)

一般使用两种方式进行任意组件之间传值，其原理一致，都是将传的值与vue实例相关联。

方式一：

首先：创建一个EventBus.js文件，引入并导出vue实例。

import Vue from 'vue';     //引入vue实例
export default new Vue();   //导出默认vue实例

然后：在发送方组件内引入EventBus.js，再通过bus.$emit自定义事件发送数据。

import bus from './eventBus.js';

methods:{
    handSend(){
        bus.$emit('自定义事件名','要发生的数据');
    }
}

最后，在接收方组件内引入EventBus.js，再在created()生命周期函数中通过bus.$on接收数据

import bus from './eventBus.js';

data(){
    return {
        getFatherData:''
    }
},
created(){
    bus.$on('事件名',val=>{    //val就是发送方组件传来的值。事件名要和发送方的自定义事件名保持一致
        this.getFatherData=val;
    })
}

方式二：

在项目全局入口文件main.js中，创建一个空的vue实例，并挂载到vue的原型上。

首先：在main.js中：

Vue.prototype.$bus=new vue();

然后，在发送方,通过this.$bus.$emit自定义事件发送数据

methods:{
    handSend(){
        this.$bus.$emit('自定义事件名','要发生的数据');
    }
}

最后，在接收方,在created()生命周期函数中通过this.$bus.$on接收数据

data(){
    return {
        getFatherData:''
    }
},
created(){
    this.$bus.$on('事件名',val=>{    //val就是发送方组件传来的值。事件名要和发送方的自定义事件名保持一致
        this.getFatherData=val;
    })
}