常用的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;
    })
}

上一篇:Vue--组件间的数据共享(传值)


下一篇:全局事件总线以及消息订阅