在开发中会遇到两个兄弟组件,哥哥执行完毕之后弟弟显示,哥哥隐藏,这种情况下我们就需要重新考虑执行先后顺序
比如
新建中间件,bus.js,让各个兄弟共用同一个传值事件机制。
import Vue from 'vue'
export default new Vue
在child_1.vue(哥哥)组件中,绑定事件
import Bus from "@/utils/bus.js"
mounted() {
Bus.$on('getMergeId', this.getMergeId)
},
methods: {
getMergeId(callback) {
if (callback) callback(this.id);
},
}
在child_2.vue(弟弟)组件中,触发事件获取值
import Bus from "@/utils/bus.js"
Bus.$emit("getMergeId", id => {
this.id = id
});
然后就可以在弟弟组件中获取到哥哥组件的data值喽
本文介绍了一种Vue项目中实现兄弟组件通信的方法:通过创建一个全局的bus实例来传递消息。具体实现了在一个组件(哥哥)完成操作后触发另一个组件(弟弟)显示并传递所需的数据。
1691

被折叠的 条评论
为什么被折叠?



