diff --git a/20_脚手架/vue_code/09.自定义事件/main.js b/20_脚手架/vue_code/09.自定义事件/main.js index 30ef712..e2a48a7 100644 --- a/20_脚手架/vue_code/09.自定义事件/main.js +++ b/20_脚手架/vue_code/09.自定义事件/main.js @@ -13,4 +13,4 @@ new Vue({ App }, render: h => h(App) -}).$mount('#app') +}).$mount('#app') \ No newline at end of file diff --git a/20_脚手架/vue_code/11.src_全局事件总线/App.vue b/20_脚手架/vue_code/11.src_全局事件总线/App.vue new file mode 100644 index 0000000..c8d2876 --- /dev/null +++ b/20_脚手架/vue_code/11.src_全局事件总线/App.vue @@ -0,0 +1,32 @@ + + + + + \ No newline at end of file diff --git a/20_脚手架/vue_code/11.src_全局事件总线/assets/logo.png b/20_脚手架/vue_code/11.src_全局事件总线/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/20_脚手架/vue_code/11.src_全局事件总线/assets/logo.png differ diff --git a/20_脚手架/vue_code/11.src_全局事件总线/components/School.vue b/20_脚手架/vue_code/11.src_全局事件总线/components/School.vue new file mode 100644 index 0000000..0bfe5f9 --- /dev/null +++ b/20_脚手架/vue_code/11.src_全局事件总线/components/School.vue @@ -0,0 +1,37 @@ + + + + + + diff --git a/20_脚手架/vue_code/11.src_全局事件总线/components/Student.vue b/20_脚手架/vue_code/11.src_全局事件总线/components/Student.vue new file mode 100644 index 0000000..229ba86 --- /dev/null +++ b/20_脚手架/vue_code/11.src_全局事件总线/components/Student.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/20_脚手架/vue_code/11.src_全局事件总线/main.js b/20_脚手架/vue_code/11.src_全局事件总线/main.js new file mode 100644 index 0000000..4d5e394 --- /dev/null +++ b/20_脚手架/vue_code/11.src_全局事件总线/main.js @@ -0,0 +1,19 @@ +// 引入Vue +import Vue from "vue"; +// 引入App +import App from "./App"; + +// 设置Vue +Vue.config.productionTip = false + + +// 实例化Vue +new Vue({ + components: { + App + }, + render: h => h(App), + beforeCreate() { + Vue.prototype.$bus = this // 安装全局事件总线 + } +}).$mount('#app') diff --git a/20_脚手架/vue_code/src/components/School.vue b/20_脚手架/vue_code/src/components/School.vue index 6194c82..0bfe5f9 100644 --- a/20_脚手架/vue_code/src/components/School.vue +++ b/20_脚手架/vue_code/src/components/School.vue @@ -14,6 +14,16 @@ export default { name: "修仙学院", address: "长白山", } + }, + mounted() { + console.log(this) + console.log(this, this.$bus) + this.$bus.$on('hello', (data)=>{ + console.log('这是School组件,收到了数据', data) + }) + }, + beforeDestroy() { + this.$bus.off('hello') } } diff --git a/20_脚手架/vue_code/src/components/Student.vue b/20_脚手架/vue_code/src/components/Student.vue index c40ba62..229ba86 100644 --- a/20_脚手架/vue_code/src/components/Student.vue +++ b/20_脚手架/vue_code/src/components/Student.vue @@ -2,6 +2,7 @@

学生名称:{{ name }}

学生年龄:{{ age }}

+
@@ -13,6 +14,11 @@ export default { name: "小强", age: 18 } + }, + methods:{ + sendStudentName() { + this.$bus.$emit('hello', this.name) + } } } diff --git a/20_脚手架/vue_code/src/main.js b/20_脚手架/vue_code/src/main.js index 30ef712..4d5e394 100644 --- a/20_脚手架/vue_code/src/main.js +++ b/20_脚手架/vue_code/src/main.js @@ -12,5 +12,8 @@ new Vue({ components: { App }, - render: h => h(App) + render: h => h(App), + beforeCreate() { + Vue.prototype.$bus = this // 安装全局事件总线 + } }).$mount('#app')