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

目录

[一、 实现所有组件看到x事件](#一、 实现所有组件看到x事件)

[二、 实现on off 以及 emit](#二、 实现on off 以及 emit)

[总结不易~ 本章节对我有很大的收获, 希望对你也是!!!](#总结不易~ 本章节对我有很大的收获, 希望对你也是!!!)


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

全局事件总线图:

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

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

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

javascript 复制代码
import Vue from 'vue'

import App from './App.vue'


// 关闭Vue生产提示
Vue.config.productionTip = false

Vue.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

javascript 复制代码
Vue.prototype.x = { a: 1, b: 2 }

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

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

javascript 复制代码
const Demo = Vue.extend({}) // 创建一个组件
const d = new Demo() // 组件的一个实例对象

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

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

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

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

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

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

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

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

Student组件用来传值:

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

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

javascript 复制代码
  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组件, 所以这里用全局事件总线就会非常方便!

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

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

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

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

html 复制代码
      <MyList :todos="todos" />

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

javascript 复制代码
  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)
      }
    }
  }

利用全局事件总线 进行触发事件

分别对数据进行添加和删除的时候, 这里都触发的是$bus全局事件~

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

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

相关推荐
源码云商34 分钟前
基于 SpringBoot + Vue 的校园管理系统设计与实现
vue.js·spring boot·后端
几度泥的菜花37 分钟前
Vue 项目中二维码生成功能全解析
javascript·vue.js·ecmascript
筱歌儿2 小时前
小程序问题(记录版)
前端·小程序
火龙谷2 小时前
【爬虫】码上爬第6题-倚天剑
开发语言·javascript·爬虫
Jinuss2 小时前
源码分析之Leaflet中的LayerGroup
前端·leaflet
赶飞机偏偏下雨2 小时前
【前端笔记】CSS 选择器的常见用法
前端·css·笔记
LuckyLay3 小时前
AI教你学VUE——Deepseek版
前端·javascript·vue.js
liuyang___4 小时前
vue3+ts的watch全解!
前端·javascript·vue.js
我是哈哈hh4 小时前
【Vue】组件自定义事件 & TodoList 自定义事件数据传输
前端·javascript·vue.js·vue3·vue2