目录
第三步,在school.vue里改变 sendSchoolName()
之前的代码可见点击跳转
可以实现任何组件之间的数据交流
第一步,要认所有的组件看见一个共同东西我们叫----bus
bus不仅仅有公交车的意思,还有
在main.js里
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
el: "#app",
render: (h) => h(App),
beforeCreate() {
Vue.prototype.$bus = this; //安装全局事件总线
},
});
这段代码是主要的:
beforeCreate() {
Vue.prototype.$bus = this; //安装全局事件总线
},
第二步,在student.vue里加上
mounted() {
this.$bus.$on("hello", (data) => {
console.log("收到了school数据", data);
});
},
第三步,在school.vue里改变 sendSchoolName()
sendSchoolName() {
// this.$emit("liujiayi", this.schoolName);
this.$bus.$emit("hello", this.schoolName);
},
已经完成了大部分
最后,
最好加上这段代码,解绑
beforeDestroy() {
this.$bus.$off("hello");
},