首页 > 其他分享 >只需三步 带你了解 Vue事件总线(EventBus)

只需三步 带你了解 Vue事件总线(EventBus)

时间:2022-10-21 14:49:02浏览次数:60  
标签:Vue aMsg 总线 js msg EventBus main

第一步:直接在项目中的 main.js 初始化 EventBus :

// main.js
Vue.prototype.$EventBus = new Vue()

第二步:找到两个页面A和B,A向B发送事件

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      this.$EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

第三步:B接收事件

 mounted() {
    this.$EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });

 

标签:Vue,aMsg,总线,js,msg,EventBus,main
From: https://www.cnblogs.com/heibaiqi/p/16813393.html

相关文章

  • Vue深度监听
    1.监听一般写法watch:{ a(newVal,oldVal){ console.log(newVal); }}2.当监听对象属性时watch:{ "obj.name"(newVal,oldVal){ console.log(newVal); }}3.......
  • Vue3 SFC 和 TSX 方式自定义组件实现 v-model
    1v-model1.1理解v-modelv-model是vue3中的一个内置指令,很多表单元素都可以使用这个属性,如input、checkbox等,咱可以在自定义组件中实现v-model。v-model本质上......
  • ant.design-vue 级联多选组件
    取自doit-ui-web ,基于ant.design封装的功能组件,实现多选级联样式表功能,根据自身情况引入到自己的项目中 <template><divclass="gb-ant-select-multiple-c......
  • vue 处理打包后加载慢的问题
    在开发项目时引入过多的插件时,容易导致项目打包后chunk-vendors.js文件过大,导致浏览器加载慢的问题,目前有两种解决方式方式一:由于:chunk-vendors文件过大、js没有压缩、服......
  • vue项目封装api接口
    前言:vue的axios基于promise的http库,可以运行在浏览器和node环境中一:api封装文件request..jsimport'axios'from'axios'//引用axios插件 npminstallaxios--s//创......
  • Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到
    一般后台对商品的信息管理、包含商品的上架与下架。为了提高用户的体验、将商品上下架的操作做成开关的形式。同时后台数据库中保存的商品状态能够根据开关状态改变。1......
  • Vue虚拟dom是如何被创建的
    先来看生成虚拟dom的入口文件:...import{parse}from'./parser/index'import{optimize}from'./optimizer'import{generate}from'./codegen/inde......
  • Vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://gi......
  • 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践
    最近一种在捣鼓Tauri集成Vue3技术开发桌面端应用实践,tauri实现创建多窗口,窗口之间通讯功能。开始正文之前,先来了解下tauri结合vue3.js快速创建项目。tauri在......
  • vue3使用echarts插件并实现点击下载图表功能
    接到一个新的需求,就是用vue3制作一幅世界地图,并实现点击下载按钮将图表转变为图片下载到本地。使用插件: html2canvasnpm安装: npminstallhtml2canvas组件引入: import......