在开发中会遇到两个兄弟组件,哥哥执行完毕之后弟弟显示,哥哥隐藏,这种情况下我们就需要重新考虑执行先后顺序
比如
新建中间件,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值喽