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程…

《英伟达-本地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…

理论学习-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位置未更新无返回…

【Linux】Linux调试器-gdb使用

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

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

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

笔记: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…

python 与 neo4j 交互(py2neo 使用)

参考自&#xff1a;neo4j的python.py2neo操作入门 官方文档&#xff1a;The Py2neo Handbook — py2neo 2021.1 安装&#xff1a;pip install py2neo -i https://pypi.tuna.tsinghua.edu.cn/simple 1 节点 / 关系 / 属性 / 路径 节点(Node)和关系(relationship)是构成图的基础…

重磅!移远通信正式发布一站式XR产品解决方案,助力探索数字世界新纪元

伴随着以5G、大数据、云计算等现代化信息科技的发展&#xff0c;人类对数字世界、智慧地球的探索更加深入。尤其是以XR&#xff08;扩展现实&#xff09;为代表的技术崛起&#xff0c;更让物理世界与虚拟世界中的连接愈发紧密&#xff0c;千行百业也亟待新探索。 近日&#xff…

计算机组成原理(4)-----Cache的原理及相关知识点

目录 1.Cache的原理 2.Cache的性能 3.Cache和主存的映射方式 &#xff08;1&#xff09;全相联映射 &#xff08;2&#xff09;直接映射 &#xff08;3&#xff09;组相联映射 4.替换算法 (1)随机算法(RAND) (2)先进先出算法(FIFO) (3)近期最少使用(LRU) (4)最近不经…

论文阅读:How Do Neural Networks See Depth in Single Images?

是由Technische Universiteit Delft(代尔夫特理工大学)发表于ICCV,2019。这篇文章的研究内容很有趣,没有关注如何提升深度网络的性能&#xff0c;而是关注单目深度估计的工作机理。 What they find&#xff1f; 所有的网络都忽略了物体的实际大小&#xff0c;而关注他们的垂直…

WEB APIs (4)

日期对象 实例化 代码中出现new关键字&#xff0c;创建时间对象 得到当前时间&#xff1a; const date new Date&#xff08;&#xff09; 获得指定时间&#xff1a; const date new Date&#xff08;‘2022-5-1’&#xff09; 方法作用说明getFullYear()获取年份获取…

搜索专项---DFS之连通性模型

文章目录 迷宫红与黑 一、迷宫OJ链接 本题思路:DFS直接搜即可。 #include <iostream> #include <cstring> #include <algorithm>constexpr int N110;int n; char g[N][N]; bool st[N][N]; int x1, y1, x2, y2;int dx[4] {-1, 0, 1, 0}, dy[4] {0, 1, 0, …

2024 高级前端面试题之 计算机通识(基础) 「精选篇」

该内容主要整理关于 计算机通识&#xff08;基础&#xff09; 的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 计算机基础精选篇 一、网络1.1 UDP1.2 TCP1.3 HTTP1.4 DNS 二、数据结构2.1 栈2.2 队列2.3 链表2.4 树2.5 堆 三、算法3.1 时…

使用 Nuxt 构建简单后端接口及数据库数据请求

写在前面 本文主要为大家介绍&#xff0c;如何使用 Nuxt 框架实现一个简单的后端接口&#xff0c;并且从数据库中请求数据返回给前端。 实现 创建 serverMiddleware 文件夹 首先我们新建一个名字为 serverMiddleware 文件夹用来存储接口相关信息 目录结构如下&#xff1a;…

汽车电子论文学习--电动汽车电机驱动系统动力学特性分析

关键重点&#xff1a; 1. 汽车的低速转矩存在最大限制&#xff0c;受附着力限制&#xff0c;因路面不同而变化。 2. 起步加速至规定转速的时间可以计算得到&#xff1a; 3. 电机额定功率的计算方式&#xff1a; 可以采取最高设计车速90%或120km/h匀速行驶的功率作为电机额定功…