当前位置：首页 > web >正文

【Vue】全局事件总线 TodoList 事件总线

web 2025/5/9 0:20:34

一、实现所有组件看到x事件

二、实现$on $off 以及 $emit

总结不易~ 本章节对我有很大的收获，希望对你也是！！！

本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.com

全局事件总线图：

本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.com

一、实现所有组件看到x事件

到main.js 里面设置全局总线

import Vue from 'vue'import App from './App.vue'// 关闭Vue生产提示
Vue.config.productionTip = falseVue.prototype.x = { a: 1, b: 2 }// 创建vm
new Vue({el: '#app',render: h => h(App)
})

分别在School 和 Student组件上进行挂载输出当前对象

现在就是实现了第一个，能让所有组件看到 x

本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.com

二、实现$on $off 以及 $emit

Vue.prototype.x = { a: 1, b: 2 }

由于上面只是一个普通对象，所以我们没有办法能够访问它的$on, $off以及$emit，因为这些只存在组件的实例对象中，那么我们第一件事情就是要创建组件的实例对象。

这个d组件实例对象就是相当于一个vc 只是一个组件的实例对象~

const Demo = Vue.extend({}) // 创建一个组件
const d = new Demo() // 组件的一个实例对象// Vue.prototype.x = { a: 1, b: 2 }
Vue.prototype.x = d

在School组件内进行事件绑定：

  mounted() {console.log(this.x)// $on 监听一个名字叫 "hello" 的事件，一旦别人触发了这个事件，我就执行后面的代码。// $on 给x绑定了一个'hello' 事件this.x.$on('hello', (data) => {console.log('我是School组件， 收到了数据', data)})},

在Student组件内进行值的传递：

  <button @click="sendStudenName">把学生名给School组件</button>methods: {sendStudenName() {this.x.$emit('hello', 666)}}

可以看到确实起到了全局的作用分别来进行值的输入和接收

但是定义那么多行的vc实在是过于臃肿，我们就可以直接在创建vm的时候来直接定义全局事件

// 创建vm
new Vue({el: '#app',render: h => h(App),beforeCreate() {// 这里的 $bus 是一个全称Vue.prototype.$bus = this // 这个this本身就是Vue的实例对象// 安装全局事件总线}
})

Student组件用来传值：

<button @click="sendStudenName">把学生名给School组件</button> methods: {sendStudenName() {this.$bus.$emit('hello', this.name)}}

School用两个生命周期钩子进行获取值：分别用来绑定事件和解绑解绑事件！

  mounted() {// $on 监听一个名字叫 "hello" 的事件，一旦别人触发了这个事件，我就执行后面的代码。// $on 给x绑定了一个'hello' 事件this.$bus.$on('hello', (data) => {console.log('我是School组件， 收到了数据', data)})},// 销毁之前的钩子// beforeDestroy已经废弃了// 用完了 一定要把傀儡身上的事件解绑beforeUnmount() {this.$bus.$off('hello')}

TodoList全局事件总线传值

虽然我们学习了全局事件总线，任意两个组件之间的通信都非常方便，但是也不是所有组件之间的通信都要用上全局事件总线，就比如：父组件给子组件传递数据，props就极其方便~

但是在TodoList中的MyItem组件跟 App组件之间是爷孙关系所以用全局事件总线就会比较方便~

因为List组件是没有用到该方法的而是转手就又传给了Item组件，所以这里用全局事件总线就会非常方便！

那么我们就需要做到的是直接进行通信，不在进行逐层传递~

第一步就是创建全局事件总线：

// 创建vm
new Vue({el: '#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

第二步，清除掉List组件和App组件以及 Item组件通过props传入的函数：

      <MyList :todos="todos" />

第三步，确定是Item给App传递数据

  methods: {handleCheck(id) {console.log(id)// this.checkTodo(id)this.$bus.$emit('checkTodo', id)},handleDelete(id) {if(confirm('确定删除吗')) {console.log(id)// this.deleteTodo(id)this.$bus.$emit('deleteTodo', id)}}}