1, Parent component Value transmission Subcomponents
Parent component ：<Header :msg='msg'/>
Subcomponents ：
props:['msg']
props:{
msg: data type
}
Subcomponents props The content of is the content after the colon , Not in quotes , Generally speaking :xxx='msg' ,props:['xxx'] , For the convenience of the general
The colon and quotation marks are the same .
2, Subcomponents Value transmission Parent component
<input v-model='changeVal'>
Subcomponents ：this.$emit("childInput",this.changeVal);
Parent component ：
<Header @childInput = 'getVal' />
methods:{
getVal(msg){
//msg namely Data passed by subcomponents
}
}
The first parameter of the subcomponent is the name of the custom event , The second parameter is the data to be transmitted .
3, Value transfer between sibling components
Through a transit （ Event bus bus）
A Brother pass value ：
import bus from '@/common/bus'
bus.$emit("toFooter",this.msg)
B Brother reception ：
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
this.str=data
})
//bus.js import Vue from 'vue'; export default new Vue; // use A brother Value transmission import bus
from ' route ' bus.$emit(' Custom event name ', output data ) // use B brother receive import bus from ' route '
bus.on(' Custom event name ',(res)=>{})
Technology