首页 > 其他分享 >VUE-组件间通信BUS

VUE-组件间通信BUS

时间:2024-01-16 10:35:24浏览次数:29  
标签:VUE struct BUS 间通信 relation Bus fun import Evs

VUE-组件间通信BUS

1. 在src 下创建文件夹 eventBus 

创建文件bus.js

import Vue from 'vue';  
export default new Vue(); 

 

创建文件 busenum.js

let Evs = {
  fun_struct_relation: "fun_struct_relation", //关联工程结构树
};
export default Evs;

 

 

2. 调用

在要调用的页面使用以下代码:

import Bus from "@/eventBus/bus";
import Evs from "@/eventBus/busenum";

export function MicroTruns(data) {
      Bus.$emit(Evs.fun_struct_relation, 'canshu');
}

 

 

3. 接收

在要接收的页面使用以下代码:

import Bus from "@/eventBus/bus";
import Evs from "@/eventBus/busenum";

  created() {
    Bus.$off(Evs.fun_struct_relation); // 先清除这个categoriesOfData监听,否则切换页面不会取消掉,导致重复调用
    Bus.$on(Evs.fun_struct_relation, (data) => {
      // this.fun_get_workFlowList(that.workFlowSelectedGId);
    });
  },

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end

 

标签:VUE,struct,BUS,间通信,relation,Bus,fun,import,Evs
From: https://www.cnblogs.com/1285026182YUAN/p/17967061

相关文章

  • 《vue新建篇》新建项目
    脚手架和webpack的区别"vueinitwebpack"是Vue.js2.x的旧方式,使用webpack模板创建项目。这种方式需要手动配置一些比较复杂的webpack配置,配置大量的选项,但是可以按照个人需求进行灵活的配置。这个命令可以用来创建高度定制化的Vue.js项目。"vuecreate"是Vue.js3.......
  • vue入门页面,搭建localhost官方默认页面
    按照提示操作可以做出下图效果:idea中的vue目录层级为:1.下载node.js(nodes.js是前端的运行环境,类似于后端中的jdk,没有node.js后续操作无法进行,具体流程百度)2.新建文件夹(这个文件夹就是你之后vue的目录)点进去新建的文件夹3.输入cmd回车4.输入命令:npmconfigsetreistryht......
  • 《vue概念篇》vue设计思路
    vue工作原理参考链接:https://www.cnblogs.com/lishanlei/p/8423407.html参考链接:https://www.cnblogs.com/wzfwaf/p/10553160.htmlMV模式之前,我们都是通过原生js操作dom元素,比如:获取内容、增加点击事件等,如果任务量非常大,那么我们的js代码会随着业务的增加变得臃肿,那么多逻辑,......
  • 《vue语法篇》基础语法
    ref和$ref在Vue中,$ref是一个特殊的属性,它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符,然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。例如,假设您有一个组件:点击查看代码<template><div><inputtype="text"ref="myI......
  • Vue实现大文件分片上传,包括断点续传以及上传进度条
    首先解释一下什么是分片上传分片上传就是把一个大的文件分成若干块,一块一块的传输。这样做的好处可以减少重新上传的开销。比如:如果上传的文件是一个很大的文件,那么上传的时间应该会比较久,再加上网络不稳定各种因素的影响,很容易导致传输中断,用户除了重新上传文件外没有其他的办法......
  • modbus开源库 libmodbus
    近期用到了modbus,搜到了libmodbus开源库,记录一下。网上关于如何编译的文章很多,不再赘述。借鉴:https://blog.csdn.net/qq_38158479/article/details/120928043说明:本文代码改造为适于windows的qt。为了多线程业务处理,类继承QObject,这里作为服务器(子站)。代码和例子位于文末。例子......
  • 4412 设备树 qt busybox , ctrl+c 无法终止 程序
    问题: 在系统中,ctrl+c无法终止程序。背景: 软件:迅为网盘设备树镜像。硬件:迅为4412板卡。  网上的截图:   我自己的改动如下;     结果显示: ......
  • vue中render函数和h函数
    "render"函数是Vue组件的一个重要方法,它用于描述组件的视图结构,并负责渲染虚拟DOM树。"render"函数是一个JavaScript函数,它接受一个名为createElement的参数,用于创建虚拟DOM节点。这使得你可以使用JavaScript来构建虚拟DOM树,包括元素、组件、指令等,为你提供更高的灵活性。render......
  • vue知识
    v-if和v-for的比较vue组件data函数形式key的作用diff算法你了解哪些vue的性能优化方法一、v-if和v-for的哪个优先级更高,如果两个同时出现,应该怎么优化得到更好的性能在源码中发现,先处理静态节点(staticRoot),再处理once,接着才会处理for,最后处理if(看下图)结论:1......
  • vue cli使用介绍
    一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的npm包,提供了终端里的vue命令(如:vuecreate、vueserve、vueui等命令)CLI服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供如:s......