Vue全局事件总线你了解吗

全局事件总线,是组件间的一种通信方式,适用于任何组件间通信。

看下面具体的例子。

父组件:App

<template>
    <div class="app">
        <Company/>
        <Employee/>
    </div>
</template>

<script>
import Company from "./components/Company.vue";
import Employee from "./components/Employee.vue";

export default {
    components:{
        Company,
        Employee
    }
}
</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
.btn{
    margin-left:10px;
    line-height: 30px;
    background: ivory;
    border-radius: 5px;
}
</style>

子组件:Company和Employee

<template>
  <div class="company">
      <h2>公司名称:{{name}}</h2>
      <h2>公司地址:{{address}}</h2>
      <button @click="sendMessage">点我发送</button>
  </div>
</template>

<script>
export default {
    name:"Company",
    data(){
        return {
            name:"五哈技术有限公司",
            address:"上海宝山"
        }
    },
    methods:{
        sendMessage(){
            console.log("Company组件发送数据:",this.name);
            this.$bus.$emit("demo",this.name);
        }
    }

}
</script>

<style scoped>
.company{
    background: orange;
    background-clip: content-box;
    padding: 10px;
}
</style>
<template>
  <div class="employee">
      <h2>员工姓名:{{name}}</h2>
      <h2>员工年龄:{{age}}</h2>
  </div>
</template>

<script>
export default {
    name:"Employee",
    data(){
        return {
            name:"张三",
            age:25
        }
    },
    mounted(){
        this.$bus.$on("demo",(data) => {
            console.log("Employee组件监听demo,接收数据:",data);
        })
    },
    beforeDestroy() {
        this.$bus.$off("demo");
    }
}

</script>

<style scoped>
.employee{
    background: skyblue;
    background-clip: content-box;
    padding: 10px;
}
</style>

入口文件:main.js

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;
  }
})

父组件App,子组件CompanyEmployee

子组件Company和Employee之间通过全局数据总线进行数据传递。

在main.js中,定义了全局事件总线:$bus

$bus定义在Vue.prototype,因此$bus对所有组件可见,即所有组件可通过this.$bus访问。

$bus被赋值为this,即vm实例,因此$bus拥有vm实例上的所有属性和方法,如$emit$on$off等。

new Vue({
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
})

使用全局事件总线

$bus.$on,监听事件。Employee组件中定义了监听事件,监听demo事件;

$bus.$emit,触发事件。Company组件中定义了触发事件,点击按钮执行sendMessage回调,该回调将触发demo事件。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • Vue组件之事件总线和消息发布订阅详解

    目录 简介 事件总线 消息的发布订阅 总结 简介 主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的. 事件总线 事件总线是组件间通信的一种方式,适用于任意组件间的通信,比如毫不相干的两个组件.父子组件间.后代组件等等,都能通信. 事件总线有两个特性: 是一个vue组件实例或者一个vue实例,充当一个消息中转站,如果A.B组件想要通信,那么A组件存消息到中转站,B消息拿,或者反过来. 所有组件都要能获取到事件总线. 如果A.B组件间通信,如果A发送数据给B的情况下,需要以下步骤

  • 在 Vue.js中优雅地使用全局事件的方法

    Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法. 主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式. 以下为 mixin 文件代码 // event-mixin.js export default { created() { if (thi

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • Vue全局事件总线和订阅与发布使用案例分析讲解

    目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事件总线 作用 一种组件间通信的方式 适用于任意组件间通信. 安装 安装全局事件总线:在入口文件main.js中,给VM添加$bus,任意组件都可以在原型中调用. new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t

  • Vue全局事件总线$bus安装与应用小结

    目录 1.什么是全局事件总线 2.安装 3.使用 4.销毁 完整版示例: 1.什么是全局事件总线 一种组件间通信的方式,适用于任意组件间通信. 2.安装 在main.js里安装全局事件总线: new Vue({ ...... beforeCreate(){ //安装全局事件总线,$bus就是当前应用的vm Vue.prototype.$bus=this } ...... }) 3.使用 使用全局事件总线: 1.接收数据:A组件想接收数据,则要在A组件中给$bus绑定自定义事件,事件的回调留在A组

  • Vue全局事件总线你了解吗

    全局事件总线,是组件间的一种通信方式,适用于任何组件间通信. 看下面具体的例子. 父组件:App <template> <div class="app"> <Company/> <Employee/> </div> </template> <script> import Company from "./components/Company.vue"; import Employee

  • Vue eventBus事件总线封装后再用的方式

    目录 前言 空vue实例构建的事件总线 简单的方式 复杂又简单的方式 总结 前言 现在的项目中是不是在使用 eventbus 的时候,还有很多人都是直接创建一个vue 实例直接使用的,哪里需要哪里引入,而没有简单的处理下.接下来就先说下这种方式. 空vue实例构建的事件总线 在改造一个项目的时候就发现,里面的 bus.js 文件中就是这么处理的.两行代码搞定. import Vue from "vue"; export default new Vue() 使用的时候,就没那么简单了,有

  • Vue中事件总线(eventBus)的深入详解及使用

    目录 1.简介 2.使用 安装及引入 在组件中使用 补充:移除监听事件 总结 1. 简介 Vue 组件中常见的有:父子组件通信.兄弟组件通信.而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件. 今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢? 如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信. eventBus

  • 如何在pyqt中实现全局事件实战记录

    目录 前言 全局事件总线 Vue 中的全局事件总线 Qt 中的全局事件总线 总结 前言 在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景: 我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么一种实现方式如上图所示:点击任意一个蓝色方框所示的专辑卡,发出 switchToAlbumIntetrfaceSig 给父级部件专辑卡视图,因为专辑卡视图有许多个分组,比如上图中为 aiko 分组,可能还有 柳井爱子 分组,那么这些视图都应该将 switchToAlbumI

  • Vue 组件事件触发和监听实现源码解析

    目录 正文 Vue 的事件触发和监听 源码分析 on once emit off 动手实现 总结 正文 通常我们在使用Vue的时候,会使用$emit和$on来触发和监听事件,但是有没有思考是如何实现的呢? 今天带来的是一个微型的事件触发的库,借它们的源码来简单初步了解Vue的事件触发和监听的实现. mitt tiny-emitter mitt使用TypeScript编写,tiny-emitter使用原生ES5编写,两者对比tiny-emitter功能稍微丰富一写,所以直接看tiny-emitte

随机推荐