首页 > 其他分享 >Vue2中EventBus总线使用

Vue2中EventBus总线使用

时间:2023-03-02 17:24:50浏览次数:53  
标签:.. Bus utils 总线 beforeDestroy js Vue2 import EventBus

参考 https://juejin.cn/post/6995015040805896200

在utils文件夹中创建bus.js文件

import Vue from 'vue';
export const Bus = new Vue();

在需要的地方使用

// Fisrt
import { Bus } from '../../utils/Bus.js';
  // 监听数据
  mounted() {
    Bus.$on('toggleData', (data) => {
      this.toggle = data;
    });
  },
  // 清空Bus
  beforeDestroy() {
    Bus.$off();
  }

// Second
import {Bus} from "../../utils/Bus.js"

    goPmPage() {
      Bus.$emit("toggleData", true);
      this.$router.push("/manage/govproject");
    },

  beforeDestroy() {
    Bus.$off()
  }

标签:..,Bus,utils,总线,beforeDestroy,js,Vue2,import,EventBus
From: https://www.cnblogs.com/openmind-ink/p/17172453.html

相关文章

  • 存储系列之 硬盘接口与SCSI总线协议
    本文主要介绍硬盘的接口、总线和协议,SSD与SATA硬盘一般是兼容的,NVmeSSD除外。 一、磁盘控制器上一章介绍了存储系统的主要介质硬盘,而硬盘的读写通过磁头臂,磁头臂是由磁......
  • day81- 全局事件总线
    全局事件总线在组件间通信的一种方式,适用于任意组件通信之前实现的是父子组件的通信,如果兄弟组件想要相互传递消息就需要先向app组件传信息,app设置回调再往兄弟组件中传......
  • VUE2 条件渲染
    条件渲染v-show特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉了。<divv-show="flag"></div><script>data(){return{flag:true......
  • VUE2 表单
    <form>-<input>-<label>-v-model<form@submit="confirm"><labelfor="account">账号:</label><!--用来获取焦点,点击“账号:”后可以选中input框,它里面的fo......
  • Vue2 复习
    Vue版本:V2:https://cn.vuejs.org/v2/guide/installation.htmlV3:https://v3.cn.vuejs.org/guide/introduction.htmlVueCLI:vue-cli:https://github.com/vuejs/vue-......
  • Vue2 组件总结
    注册全局组件使用Vue.component(...)的方式创建全局组件,注册属性,创建模版props属性:父组件传递数据到子组件。高级内容:Prop属性、Prop验证等this.$emit:将事件传......
  • VUE2 完整写法
    自定义指令的生命周期钩子bind()、inserted()、updata()<inputtype="text"v-fbind:value="n"/><script>directives:{fbind:{            ......
  • vue2 模拟响应式数组优化2
    上一篇主要是对数组类型进行响应式处理,这次主要对数组里面的属性值、嵌套数组、数组新增后的值进行响应式处理。如下文:执行下面方法,数组的依赖函数不会触发import{obs......
  • VUE2 自定义指令
    简写方式(有弊端)<h2>{{name}}</h2><h2>当前的n值是:{{n}}</h2><h2v-big="n">放大10倍后的n值是:{{n}}</h2><button@click="n++"></button>data(){return{......
  • vue2响应式原理
    首先要知道vue2是2013年基于ES5开发出来的 我们常说的重渲染就是重新运行render函数vue2响应式原理简单来说就是vue官网上的这图片  通过Object.defineProper......