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

相关推荐
烛阴28 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化42 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月42 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom