对组件之间传递值的方式——eventBus

最新推荐文章于 2024-06-01 23:08:32 发布

xiaobai_qxjn

最新推荐文章于 2024-06-01 23:08:32 发布

阅读量286

点赞数 1

文章标签： vue 前端框架 node.js javascript

本文链接：https://blog.youkuaiyun.com/xiaobai_qxjn/article/details/130802889

版权

对组件之间传递值的方式——eventBus

需求改变如下

在这里插入图片描述

一、实现思路

css：则使用伪元素来处理样式等

js ：则通过绑定事件的方式，当点击菜单栏中的教师管理或教师信息时，右边所对应的事件也触发

使用：eventBus

二、相应操作

1.导入 eventBus

vue：在main的 js文件里面导入

Vue.prototype.$eventBus = new Vue()

2.在菜单栏中的添加点击事件

发送方：

注意：也是遇到的一个坑，eventBus要等页面渲染之后，才会被触发，因此，在发送的时候做一个定时器来解决

sManager() {
      this.isActiveArray = this.changeState(this.isActiveArray, 5)
      this.$router.push({
        path: '/back/studentMessage',
        // query: { name: '教师管理中心' },
      })
      setTimeout(() => {
        this.$eventBus.$emit('student_manager', 'manager')
      }, 200)
    },

接受方：

定义在页面渲染完之后的mounted里面

mounted() {
    this.$eventBus.$on('student_manager', () => {
      this.isshowManager = true
      this.StudentManager() // 真正要被执行的事件
    })
  },

3.最后一部分——取消监听

当监听事件被触发之后，取消对其监听来完成优化

beforeDestroy() {
    this.$eventBus.$off('student_manager')
},