在vue使用过程中,经常会用到兄弟组件的传值,但有时会遇到获取不到数据的情况,
-
1,正确理解兄弟传值的概念
Vue兄弟传值
如图所示,a传b或者b传a才是兄弟传值
不同的page不能使用eventBus传值,可以使用用查询参数传值
A传B的步骤共3步,
1)新建一个eventBus.js内容为
import Vue from 'vue'
export default new Vue()
2)A组件引入eventBus.js,并使用emit发送要传递的数据
<script>
import eventBus from '你的地址/eventBus.js'
export default{
data(){
return{
data:'我是来自A组件的data'
}
}
mounted(){
this.$emit('transferData',this.data)
}
}
</script>
3)B组件引入eventBus.js,并使用on来注册事件,并接受数据
<script>
import eventBus from '你的地址/eventBus.js'
export default{
data(){
return{
data:{}
}
}
mounted(){
this.$on('transferData',(val)=>{
console.log(val)
//我是来自A组件的data
})
}
}
</script>
- 2,
vm.$emit和vm.$on的执行顺序
使用vm.$on是打开相应的事件监听,只有打开监听后发送才能接收到传递过来的参数.
所以要让vm.$on先于vm.$emit执行
