前言:vue中组件间 的传值 bus(vueBus公共交通)

在vue中,有父子组件,兄弟组件,爷孙组件,毫无关系组件等
页面之间需要传递数据(也可以使用Vuex)或触发方法,那么这时就希望有个公共的东西来及时通知,Bus 就可以很好地解决这个问题!

第一步:创建 vueBus.js文件(在utils目录下)
// vueBus.js
import Bus from 'vue';
let install = function (Vue) {
  Vue.prototype.$bus = new Bus()
}
export default { install };
第二步:在main.js中引入vueBus
// main.js
import vueBus from '@/utils/vueBus';
Vue.use(vueBus);
第三步:在.vue文件中使用 $bus

B页面——A页面,B向A传递事件

1. 在B页面 发送,在方法中$emit发送监听事件,并改变值

// this.$bus.$emit('事件名称', 值)

this.$bus.$emit('updateShowSide', false)

2. 在A页面 接收后,销毁事件,mounted$on 接收数据,destroyed$off销毁监听事件

mounted() {
    this.$bus.$on('updateShowSide', data => {
        this.showSide = data
    })
},
destroyed() {
    this.$bus.$off("updateShowSide");
},
Logo

前往低代码交流专区

更多推荐