新建一个bus.js文件
// bus.js
import Vue from 'vue'
export default new Vue;
子组件
<template>
<button @click="handleClick">给父组件传值</button>
</template>
<script>
import Bus from './bus.js'
export default {
name: "children",
methods:{
handleClick(){
Bus.$emit('open','传的测试的值')
}
},
};
</script>
父组件
<template>
<children />
</template>
<script>
import childrenfrom './children'
import Bus from './bus.js'
export default {
name: "parent",
created(){
Bus.$on('open',(val)=>{
console.log(`接受到子组件的值${val}`)
});
},
};
</script>
递归组件$emit多层点击不生效的时候也可以使用这个方法
解决bus多次触发的问题
在需要接收值的组件中修改代码
created(){
Bus.$off('open')
Bus.$on('open',(val)=>{
});
}
路由返回的时候使用bus传值,数据不更新的问题
// 如果遇到使用$router.go(-1)返回的时候,传值不更新的时候,在传值页面的销毁方法中destroyed()来进行传值
// 这是传值页面
destroyed(){
this.$bus.$emit('selectAddress',this.tshAddressStr)
},
methods:{
selectAddress(item){
console.log(item)
this.tshAddressStr = item.address
this.$router.go(-1)
},
}
// 接收值的页面在created()方法中接收传过来的值
// 这是接收值的页面
created(){
this.$bus.$off('selectAddress')
this.$bus.$on('selectAddress',(val)=>{
this.addressaaa = val
});
},