1.介绍
说明:Vue中,$bus
指的通常是一个全局事件总线,它是一种用于在不同组件之间进行通信的模式。它允许你在一个组件中发出事件,而其他组件可以监听并响应这些事件。
2.main.js
说明:为什么在beforeCreate钩子函数添加是应为此时的实例还没有创建完成;而created钩子函数实例已经创建完成了。其实就是一个顺序问题,在 data中声明的属性会在实例创建的过程中被初始化,并且能够被 Vue 实例的其他部分访问和修改。本质是created钩子函数执行后,就不会遍历data,然后就不是一个响应式的了。
new Vue({render: (h) => h(App),router,// 注册仓库,组件的身上会多个一个属性$storestore,beforeCreate() {// 全局事件总线Vue.prototype.$bus = this;},
}).$mount("#app");
3.兄弟组件1
说明:通知兄弟组件
// 通知兄弟组件清除关键字了
this.$bus.$emit("clearKeyword");
4.兄弟组件2
说明:在mounted钩子函数使用是因为 Vue 组件实例已经被挂载到 DOM 上,并且可以进行真实 DOM 元素的操作和初始化。
mounted() {//通过全局事件总线清楚关键字this.$bus.$on("clearKeyword", () => {this.keyword = "";});},