Vue 全局事件总线

全局事件总线

全局事件总线

一种可以在任意组件间通信的方式,本质上就是一个对象,它必须满足以下条件

  1. 所有的组件对象都必须能看见他
  2. 这个对象必须能够使用$on $emit $off方法去绑定、触发和解绑事件

定义全局事件总线

javascript 复制代码
new Vue({
   	...
   	beforeCreate() {
   		Vue.prototype.$bus = this // 安装全局事件总线,$bus 就是当前应用的 vm
   	},
    ...
})

使用事件总线

接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身

javascript 复制代码
export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)
    }
}

提供数据:this.$bus.$emit('xxx',data)


最好在beforeDestroy钩子中,用$off()去解绑当前组件所用到的事件
src/main.js

javascript 复制代码
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 // 安装全局事件总线
  }
})

src/components/School.vue

javascript 复制代码
<template>
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
  export default {
    name: "School",
    data() {
      return {
        name: "xxx大学",
        address: "北京",
      };
    },
    mounted() {  //🔴
      // console.log('School',this)
      this.$bus.$on("hello", (data) => {
        console.log("我是School组件,收到了数据", data);
      });
    },
    beforeDestroy() {  //🔴
      this.$bus.$off("hello");
    },
  };
</script>

<style scoped>.school {background-color: skyblue;padding: 5px;}</style>

src/components/Student.vue

javascript 复制代码
<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">把学生名给School组件</button> //🔴
  </div>
</template>

<script>
  export default {
    name:'Student',
    data() {
      return {
        name:'张三',
        sex:'男'
      }
    },
    methods: {  //🔴
      sendStudentName(){
        this.$bus.$emit('demo', this.name)
      }
    }
  }
</script>

<style scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}</style>

剩下的就是在App.vue文件中导入组件、注册和使用组件,使用npm run servrnpm run dev运行


  • 失联

最后编辑时间 2024,4,14;15:06

相关推荐
爱分享的程序员5 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘11 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出12 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的12 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解15 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵18 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im19 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man19 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下34 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构