组件之间的传值通讯
1. 父组件 传值 子组件
//父组件 home.vue
<header :msg='msg'></header>
//子组件 header.vue
props:['msg']
prop:{
msg:数据类型
}
2. 子组件 传值 父组件
子组件:
this.$emit('自定义事件名称',要传的数据)
父组件:
<header @childInput="getVal"></header>
methods:{
getVal(msg){
//msg就是,子组件传递的数据
}
}
3. 兄弟组件之间的传值
通过一个中转站(bus)
//父组件 home.vue
<header></header>
<foot></foot>
/中转站 bus.js
import Vue from 'vue'
export default new Vue
A兄弟传值
import bus from '@/common/bus'
bus.$emist("toFooter",this.msg)
B兄弟接收:
import bus from '@/common/bus'
mounted(){
bus.$on('toFooter',(data)=>{
this.msg = data
})
}