vue中组件间 的传值 bus(vueBus公共交通)
第一步:创建 vueBus.js文件(在utils目录下)// vueBus.jsimport Bus from 'vue';let install = function (Vue) {Vue.prototype.$bus = new Bus()}export default { install };第二步:在main.js中引入vueBus// main.jsimport vueBus from
·
前言: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");
},
更多推荐
已为社区贡献25条内容
所有评论(0)