当前位置: 首页 > news >正文

Vue 组件之间的通信

在 Vue.js 中,组件是构建应用程序的基本单位。然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要。本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码。

父子组件通信

父组件可以通过 props 向子组件传递数据,子组件则可以通过 $emit 向父组件发送事件。

通过 props 传递数据

父组件通过 props 向子组件传递数据:

<!-- 父组件 -->
<template><div><child-component :message="parentMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent!'};}
};
</script>

子组件通过 props 接收数据:

<!-- 子组件 -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
};
</script>
通过 $emit 发送事件

子组件通过 $emit 向父组件发送事件:

<!-- 子组件 -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {methods: {sendMessage() {this.$emit('message-sent', 'Hello from Child!');}}
};
</script>

父组件监听子组件的事件:

<!-- 父组件 -->
<template><div><child-component @message-sent="handleMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleMessage(message) {console.log(message);  // 输出 'Hello from Child!'}}
};
</script>
兄弟组件通信

兄弟组件之间通常通过事件总线(Event Bus)或 Vuex 状态管理来实现通信。

使用事件总线

创建一个事件总线:

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在兄弟组件中使用事件总线:

<!-- 组件 A -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
import { EventBus } from './event-bus.js';export default {methods: {sendMessage() {EventBus.$emit('message-sent', 'Hello from Component A!');}}
};
</script>
<!-- 组件 B -->
<template><div><p>{{ message }}</p></div>
</template><script>
import { EventBus } from './event-bus.js';export default {data() {return {message: ''};},created() {EventBus.$on('message-sent', (message) => {this.message = message;});}
};
</script>
使用 Vuex

使用 Vuex 是管理应用程序状态的最佳实践。首先安装并配置 Vuex:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {message: ''},mutations: {setMessage(state, message) {state.message = message;}},actions: {updateMessage({ commit }, message) {commit('setMessage', message);}}
});

在组件中使用 Vuex:

<!-- 组件 A -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {methods: {sendMessage() {this.$store.dispatch('updateMessage', 'Hello from Component A!');}}
};
</script><!-- 组件 B -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {computed: {message() {return this.$store.state.message;}}
};
</script>
父子组件通信与兄弟组件通信总结

理解 Vue 组件之间的通信是开发复杂应用程序的关键。通过 props$emit 进行父子组件通信,以及使用事件总线或 Vuex 进行兄弟组件通信,你可以更有效地管理和组织代码。

相关文章:

Vue 组件之间的通信

在 Vue.js 中&#xff0c;组件是构建应用程序的基本单位。然而&#xff0c;当你的应用程序变得复杂时&#xff0c;组件之间的通信变得至关重要。本文将介绍几种 Vue 组件之间通信的方式&#xff0c;帮助你更好地管理和组织代码。 父子组件通信 父组件可以通过 props 向子组件传…...

Elementary OS 7.1简单桌面调整

Elementary OS的Pantheon桌面环境提供了一种非常独特和直观的用户体验。默认情况下&#xff0c;Pantheon桌面并没有提供传统的窗口最小化、最大化按钮。但是可以通过安装和使用特定的工具来调整和自定义这些设置。 可以通过以下步骤来启用窗口的最小化和最大化按钮&#xff1a…...

【C++ | 析构函数】类的析构函数详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-06-06 1…...

ceph radosgw 原有zone placement信息丢失数据恢复

概述 近期遇到一个故障环境&#xff0c;因为某些原因&#xff0c;导致集群原有zone、zonegroup等信息丢失&#xff08;osd&#xff0c;pool等状态均健康&#xff09;。原有桶和数据无法访问&#xff0c;经过一些列fix后修复&#xff0c; 记录过程 恢复realm和pool相关信息 重…...

​​​​【动手学深度学习】残差网络(ResNet)的研究详情

目录 &#x1f30a;1. 研究目的 &#x1f30a;2. 研究准备 &#x1f30a;3. 研究内容 &#x1f30d;3.1 残差网络 &#x1f30d;3.2 练习 &#x1f30a;4. 研究体会 &#x1f30a;1. 研究目的 了解残差网络&#xff08;ResNet&#xff09;的原理和架构&#xff1b;探究残…...

freertos初体验 - 在stm32上移植

1. 说明 freertos内核 非常精简&#xff0c;代码量也很少&#xff0c;官方也针对主流的编译器和内核准备好了移植文件&#xff0c;所以 freertos 的移植是非常简单的&#xff0c;很多工具&#xff08;例如CubeMX&#xff09;点点鼠标就可以生成一个 freertos 的工程&#xff0…...

ubuntu使用 .deb 文件安装VScode

使用 .deb 文件安装 下载 VSCode 的 .deb 文件&#xff1a; wget -q https://go.microsoft.com/fwlink/?LinkID760868 -O vscode.deb使用 dpkg 安装&#xff1a; sudo dpkg -i vscode.deb如果有依赖项问题&#xff0c;使用以下命令修复&#xff1a; sudo apt-get install -f...

9.1.1 简述目标检测领域中的单阶段模型和两阶段模型的性能差异及其原因

9.1目标检测 场景描述 目标检测&#xff08;Object Detection&#xff09;任务是计算机视觉中极为重要的基础问题&#xff0c;也是解决实例分割&#xff08;Instance Segmentation&#xff09;、场景理解&#xff08;Scene Understanding&#xff09;、目标跟踪&#xff08;Ob…...

系统化自学Python的实用指南

目录 一、理解Python与设定目标 二、搭建学习环境与基础准备 三、入门学习阶段 四、中级进阶阶段 五、项目实践与持续深化 六、持续学习与拓展 一、理解Python与设定目标 Python概述&#xff1a;详细介绍Python的历史沿革、设计理念、主要特点&#xff08;如易读、易维护…...

加密货币初创企业指南:如何寻找代币与市场的契合点

撰文&#xff1a;Mark Beylin&#xff0c;Boost VC 编译&#xff1a;Yangz&#xff0c;Techub News 原文来源&#xff1a;香港Web3媒体Techub News 在 Y Combinator 创始人 Paul Graham 《Be Good》一文中概述了初创企业如何找到产品与市场契合点的方法&#xff0c;即制造人…...

【十二】图解mybatis日志模块之设计模式

图解mybatis日志模块之设计模式 概述 最近经常在思考研发工程师初、中、高级工程师以及系统架构师各个级别的工程师有什么区别&#xff0c;随着年龄增加我们的技术级别也在提升&#xff0c;但是很多人到了高级别反而更加忧虑&#xff0c;因为it行业35岁年龄是个坎这是行业里的共…...

RainBond 制作应用并上架【以ElasticSearch为例】

文章目录 安装 ElasticSearch 集群第 1 步:添加组件第 2 步:查看组件第 3 步:访问组件制作 ElasticSearch 组件准备工作ElasticSearch 集群原理尝试 Helm 安装 ES 集群RainBond 制作 ES 思路源代码Dockerfiledocker-entrypoint.shelasticsearch.yml制作组件第 1 步:添加组件…...

JVM相关:Java内存区域

Java 虚拟机&#xff08;JVM)在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域。 Java运行时数据区域是指Java虚拟机&#xff08;JVM&#xff09;在执行Java程序时&#xff0c;为了管理内存而划分的几个不同作用域。这些区域各自承担特定的任务&#xff0c…...

【C++】─篇文章带你熟练掌握 map 与 set 的使用

目录 一、关联式容器二、键值对三、pair3.1 pair的常用接口说明3.1.1 [无参构造函数](https://legacy.cplusplus.com/reference/utility/pair/pair/)3.1.2 [有参构造函数 / 拷贝构造函数](https://legacy.cplusplus.com/reference/utility/pair/pair/)3.1.3 [有参构造函数](htt…...

Mintegral数据洞察:全球中轻度游戏市场与创意更新频率

基于2024年3月大盘数据&#xff0c;汇量科技数据研究中心发现&#xff0c;超休闲品类仍是投流中轻度手游的中流砥柱。而投流力度较大的其他细分品类里&#xff0c;可以看到棋牌、模拟经营、非4X策略以及合成X游戏的身影&#xff0c;这些品类是近年来经常出现融合玩法的新兴赛道…...

贝锐蒲公英异地组网:降低建筑工地远程视频监控成本、简化运维

中联建设集团股份有限公司是一家建筑行业的施工单位&#xff0c;专注于建筑施工&#xff0c;业务涉及市政公用工程施工总承包、水利水电工程施工总承包、公路工程施工总承包、城市园林绿化专业承包等&#xff0c;在全国各地开展有多个建筑项目&#xff0c;并且项目时间周期可能…...

大模型训练学习笔记

目录 大模型的结构主要分为三种 大模型分布式训练方法主要包括以下几种&#xff1a; token Token是构成句子的基本单元 1. 词级别的分词 2. 字符级别的分词 结巴分词 GPT-3/4训练流程 更细致的教程&#xff0c;含公式推理 大模型的结构主要分为三种 Encoder-only(自编…...

Linux C/C++时间操作

C11提供了操作时间的库chrono库&#xff0c;从语言级别提供了支持chrono库屏蔽了时间操作的很多细节&#xff0c;简化了时间操作 Unix操作系统根据计算机产生的年代把1970年1月1日作为UNIX的纪元时间&#xff0c;1970年1月1日是时间的中间点&#xff0c;将从1970年1月1日起经过…...

AI绘画工具

AI绘画工具&#xff1a;技术与艺术的完美融合 一、引言 随着人工智能技术的飞速发展&#xff0c;AI绘画工具作为艺术与技术结合的产物&#xff0c;已经逐渐从科幻的概念变成了现实。这些工具不仅改变了传统绘画的创作方式&#xff0c;还为人们带来了全新的艺术体验。本文将详…...

图相似度j计算——SimGNN

图相似性——SimGNN 论文链接&#xff1a;个人理解&#xff1a;数据处理: feature_1 [[1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], # "A"[0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0], # "B"[0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0] # "C" 第二个循环&#xff…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...