一般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;
})
}