vue 非父子通信-event bus 事件总线

1.作用

非父子组件之间,进行简易消息传递。(复杂场景→ Vuex)

2.步骤

  1. 创建一个都能访问的事件总线 (空Vue实例)

    import Vue from 'vue'
    const Bus = new Vue()
    export default Bus
  2. A组件(接受方),监听Bus的 $on事件

    created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
    }
  3. B组件(发送方),触发Bus的$emit事件

    Bus.$emit('sendMsg', '这是一个消息')

3.代码示例

EventBus.js

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

BaseA.vue(接受方)

<template><div class="base-a">我是A组件(接收方)<p>{{msg}}</p>  </div>
</template>
​
<script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},
}
</script>
​
<style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

BaseB.vue(发送方)

<template><div class="base-b"><div>我是B组件(发布方)</div><button>发送消息</button></div>
</template>
​
<script>
import Bus from '../utils/EventBus'
export default {
}
</script>
​
<style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

App.vue

<template><div class="app"><BaseA></BaseA><BaseB></BaseB> </div>
</template>
​
<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {components:{BaseA,BaseB}
}
</script>
​
<style>
​
</style>

4.总结

1.非父子组件传值借助什么?

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据,可不可以被多个组件接收

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693813.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图与网络数学模型】3.Ford-Fulkerson算法求解网络最大流问题

【图与网络数学模型】3.Ford-Fulkerson算法求解网络最大流问题 一、网络流模型1. 概述2. 可行流3. 增广链 二、示例1. 最大流问题2. Alternate Formulation&#xff1a;最小截量问题 三、Ford-Fulkerson 算法1. 导入库2. 初始化残差图3. 定义查找增广路径4. 定义循环5. 程序运行…

ubuntu22.04@Jetson Orin Nano之OpenCV安装

ubuntu22.04Jetson Orin Nano之OpenCV安装 1. 源由2. 分析3. 证实3.1 jtop安装3.2 jtop指令3.3 GPU支持情况 4. 安装OpenCV4.1 修改内容4.2 Python2环境【不需要】4.3 ubuntu22.04环境4.4 国内/本地环境问题4.5 cudnn版本问题 5. 总结6. 参考资料 1. 源由 昨天用Jetson跑demo程…

揭秘 LLMs 时代向量数据库的 3 大实用场景

过去一年&#xff0c;ChatGPT 和其他大语言模型&#xff08;LLMs&#xff09;的爆火也带动了向量数据库的发展。 许多用户在搭建检索增强生成&#xff08;RAG&#xff09;系统过程中选择了使用向量数据库 Zilliz Cloud &#xff0c;但 Zilliz Cloud 的功能不止于此&#xff0c;…

Git如何使用 五分钟快速入门

Git如何使用 五分钟快速入门 Git是一个分布式版本控制系统&#xff0c;它可以帮助开发人员跟踪和管理项目的代码变更。与传统的集中式版本控制系统&#xff08;如SVN&#xff09;不同&#xff0c;Git允许开发人员在本地存储完整的代码仓库&#xff0c;并且可以独立地进行代码修…

GEE数据更新——MODIS数据LST地表温度计算案例MODIS/006/ MOD11A1 已弃用并且没有新数据。请改用MODIS/061/ MOD11A1

问题 为什么我无法在下面给出的代码中下载 2024 年的数据?看起来有效期到 2022 年 11 月。你能帮我吗? 差异 MODIS/006/ MOD11A1和MODIS/061/ MOD11A1是两个不同的MODIS地表温度数据集。它们之间的差异主要体现在数据处理方法和时间范围上。目前GEE中已经没有前者的数据。…

《英伟达-本地AI》--NVIDIA Chat with RTX-本机部署

阿丹&#xff1a; 突然发现公司给配置的电脑是NVIDIA RTX 4060的显卡&#xff0c;这不搞一搞本地部署的大模型玩一玩&#xff1f;&#xff1f;&#xff1f; 从0-》1记录一下本地部署的全过程。 本地模型下载地址&#xff1a; Build a Custom LLM with Chat With RTX | NVIDIA…

虚拟机安装Centos7迷你版

虚拟机安装Centos7迷你版 迷你版较常规版精简了很多功能&#xff0c;所以体积也小了很多&#xff0c;喜欢自定义安装的可以选择迷你版 参考文章&#xff1a; VirtualBox虚拟机安装Centos7详细教程图解 网卡配置参考文章 下载Centos迷你版镜像 安装镜像 下载镜像 阿里云Cen…

Python 安装和使用的IDE

安装 安装 Anaconda (包较大), 包含了一些库安装 Miniconda (包较小) 只和 python 打包, 没有其他的包, 用的时候需要自己安装 conda install pandaspython pythonipython 有更多的功能 ipythonjupyter jupyter notebookjupyterlab 可以去 github 查看 conda install -c…

理论学习-ARM-内核

ARM内核 函数的调用加载、存储计算中断异常线程的切换 为了提高学习效率&#xff0c;我们要提前想好学习策略。 首先&#xff0c;使用频率越高的知识点&#xff0c;越要首先学习。假使&#xff0c;我们学习了一个知识点&#xff0c;能覆盖工作中80%的工作量&#xff0c;那是不是…

机器学习基础(四)非监督学习的进阶探索

导语&#xff1a;上一节我们详细探索监督学习的进阶应用&#xff0c;详情可见&#xff1a; 机器学习基础&#xff08;三&#xff09;监督学习的进阶探索-CSDN博客文章浏览阅读296次&#xff0c;点赞13次&#xff0c;收藏11次。监督学习作为机器学习的一个主要分支&#xff0c;…

【C++】vector模拟实现+迭代器失效

vector模拟实现 成员变量定义默认成员函数构造函数 迭代器范围for、对象类型匹配原则 容量操作sizeemptycapacityreserve成员变量未更新memcpy值拷贝 resize内置类型的构造函数 数据访问frontbackoperator[ ] 数据修改操作push_backpop_backswapclearinsertpos位置未更新无返回…

解决缓存失效导致的数据库压力问题(缓存击穿问题)

问题描述 在软件开发过程中&#xff0c;特别是在使用缓存策略优化数据访问性能时&#xff0c;经常会遇到缓存失效引发的问题。具体来说&#xff0c;在一个服务类BaseDataService中&#xff0c;findData方法负责从数据库拉取数据并缓存。这里使用了expireAfterWrite60s的缓存策…

【Linux】Linux调试器-gdb使用

1. 背景 程序的发布方式有两种&#xff0c;debug模式和release模式 Linux gcc/g出来的二进制程序&#xff0c;默认是release模式 要使用gdb调试&#xff0c;必须在源代码生成二进制程序的时候, 加上 -g 选项 2. 开始使用 gdb binFile 退出&#xff1a; ctrl d 或 quit 调…

新建一个flask项目

在Flask中创建一个新的项目&#xff0c;您可以遵循以下步骤&#xff1a; 确保您已经安装了Python环境。如果还未安装Flask&#xff0c;可以通过pip来安装&#xff1a; pip install flask创建一个新的文件夹作为您的项目文件夹&#xff0c;例如myflaskapp&#xff1a; mkdir …

Java 学习和实践笔记(15):面向过程和面象对象其实很简单!

学完这一节&#xff0c;才真正明白了什么叫面向对象和面向过程&#xff0c;其实很简单~ 第一个例子&#xff1a;怎样把大象装进冰箱 这个很清楚很容易地可以列出第一步。 第二个例子&#xff1a;怎样制造一台汽车 这个就很难确定哪一步做第一步。 面向过程和面向对象的区别 …

echarts折线图单位为Bit/s的数据展示

需求&#xff1a;单位为Bit/s的数据需要换算y轴、legend和tooltip的单位&#xff1b; 显示数据时需要换算单位是因为数据以比特每秒&#xff08;Bit/s&#xff09;的形式返回&#xff0c;但是在实际展示中&#xff0c;可能更方便和易读的是使用其他单位&#xff0c;例如Gb/s、M…

8 磁盘存储器的管理

外存的组织方式 连续组织方式&#xff1a;为每一个文件分配一组相邻接的盘块 链接组织方式&#xff1a;多个不连续的盘块 链接指针 隐式链接 显示链接&#xff1a;文件分配表FAT FAT技术&#xff1a; FAT12&#xff08;512B&#xff09;、以簇为单位的FAT12文件系统、FAT16、…

笔记:torch.roll

最近在准备写 swin transformer 的文章&#xff0c;记录下 torch.roll 的用法&#xff1a; >>> x torch.tensor([1, 2, 3, 4, 5, 6, 7, 8]).view(4, 2) >>> x tensor([[1, 2],[3, 4],[5, 6],[7, 8]]) 第0维度向下移1位&#xff0c;多出的[7,8]补充到顶部 &g…

【移动开发】iOS平台 Java编译器 Jedona Compiler 评测

上期编译器评测链接&#xff1a; Java Compiler IDE评测 一、使用平台 该编译器&#xff08;Jedona Compiler&#xff09;在苹果应用市场App Store中下载&#xff0c;笔者使用iPad进行Java代码编写。 应用市场界面&#xff1a; 二、开发界面介绍 开发界面比较简洁&#xf…

【JGit 】简述及学习资料整理

JGit 介绍 [官网](JGit | The Eclipse Foundation): https://www.eclipse.org/jgit/ 用户指南 : https://github.com/eclipse-jgit/jgit/wiki/User-Guide JGit是一个用于Java编程语言的开源Git实现。它提供了一组Java库和API&#xff0c;使开发人员可以在他们的Java应用程序…