组件间通信(组件间传递数据)

组件间通信(组件间传递数据)

在 Vue.js 中,组件间通信是开发者需要经常处理的任务,特别是在构建具有多层次组件的复杂应用时。根据组件之间的关系和数据流的复杂程度,可以采用不同的通信方式。以下是常用的几种组件间通信方式:

1. 父子组件通信

父组件向子组件传递数据
  • Props:父组件可以通过 props 向子组件传递数据。Props 是在子组件中声明的属性。
    • 在父组件中使用子组件并传递数据

      <!-- ParentComponent.vue -->
      <template><ChildComponent :message="parentMessage" />
      </template><script>
      import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from Parent'};}
      };
      </script>
      
    • 在子组件中声明接收 props

      <!-- ChildComponent.vue -->
      <template><div>{{ message }}</div>
      </template><script>
      export default {props: ['message']
      };
      </script>
      
子组件向父组件传递数据
  • 事件传递:子组件通过 $emit 方法发送自定义事件,父组件通过监听这些事件来接收数据。

    • 在子组件中发射事件

      <!-- ChildComponent.vue -->
      <template><button @click="sendMessage">Send to Parent</button>
      </template><script>
      export default {methods: {sendMessage() {this.$emit('messageEvent', 'Hello from Child');}}
      };
      </script>
      
    • 在父组件中监听事件

      <!-- ParentComponent.vue -->
      <template><ChildComponent @messageEvent="receiveMessage" />
      </template><script>
      import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {receiveMessage(msg) {console.log(msg);}}
      };
      </script>
      

2. 兄弟组件通信

  • 通过共同的父组件:通常通过父组件作为中介进行通信。第一个子组件向父组件发射事件,父组件处理后将数据传递给另一个子组件。

3. 非父子组件通信

  • Event Bus(主要在 Vue 2 中使用):创建一个空的 Vue 实例用作事件总线,通过它来发射和监听事件。

    • 设置事件总线

      // event-bus.js
      import Vue from 'vue';
      export const EventBus = new Vue();
      
    • 在组件中使用

      <!-- Sending Component -->
      <script>
      import { EventBus } from './event-bus.js';
      export default {methods: {sendMessage() {EventBus.$emit('message-event', 'Hello World');}}
      };
      </script><!-- Receiving Component -->
      <script>
      import { EventBus } from './event-bus.js';
      export default {mounted() {EventBus.$on('message-event', (msg) => {console.log(msg);});}
      };
      </script>
      
  • Vuex:用于全局状态管理,提供一种集中式的状态存储,并允许所有组件访问。适用于大型应用或需要共享状态的多个组件。

    • 使用 Vuex 的时候,需要在每个组件中使用 mapState, mapGetters, mapMutations, mapActions 等辅助函数来访问和操作全局状态。

4. Provide/Inject

  • Provide/Inject API:用于祖先组件向所有子孙组件传递数据,而无需逐层传递。
    • 在祖先组件中提供数据

      // GrandparentComponent.vue
      <script>
      export default {provide() {return {sharedData: 'This is shared data'};}
      };
      </script>
      
    • 在子孙组件中注入数据

      // AnywhereDeepComponent.vue
      <template><div>{{ sharedData }}</div>
      </template><script>
      export default {inject: ['sharedData']
      };
      </script>
      

每种通信方式都有其适合的场景,根据组件关系和应用复杂度,合理选择可以提高代码的可维护性和可扩展性。

组件间通信(传递数据)

父组件向子组件传递数据

  • 父组件可以通过props向子组件传递数据。在子组件中,使用props选项来接收 父组件定义的数据。
// 父组件
<template><div class="MineralView-container"><h1>[MineralView]</h1><MineralsTable :testDeliverText="testDeliverText"></MineralsTable></div>
</template>data() {return{testDeliverText: 'test'}
// 子组件
// 在子组件中,使用`props`选项来接收 父组件定义的数据
<div>组件间通信: <hr>this data is from MineralView.vue: {{testDeliverText}}
</div>props: ['testDeliverText'],

在这里插入图片描述

子组件向父组件传递数据 – 通过event

<button @click="sendMessage">click, 子组件向父组件传递数据</button>data() {return {title:'Hello from MineralsTable.vue'};},
methods: {// 子组件向父组件传递数据sendMessage() {this.$emit('messageEvent', this.title);},

<MineralsTable:testDeliverText="testDeliverText"@messageEvent="receiveMessage"></MineralsTable><h1>{{testReceiveText}}</h1>data() {return{testDeliverText: 'test',testReceiveText: 'testReceive'}},
methods: {// @messageEvent="receiveMessage"  父组件监听$emit对应事件(以接收该事件携带的数据)// 父组件接收 子组件传递来的数据receiveMessage(msg) {console.log(msg);this.testReceiveText = msg}

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

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

相关文章

深度学习-图像评分实验(TensorFlow框架运用、读取处理图片、模型建构)

目录 0、实验准备 ①实验环境 ②需要下载的安装包 ③注意事项&#xff08;很关键&#xff0c;否则后面内容看不懂&#xff09; ④容易出现的问题 1、查看数据并读取数据。 2、PIL库里的Image包进行读取&#xff08;.resize更改图片尺寸&#xff0c;并将原始数据归一化处…

全球碳循环数据集(2000-2023)包括总初级生产力、生态系统净碳交换和生态系统呼吸变量

全球碳循环数据集&#xff08;2000-2023&#xff09; 数据介绍 PFTs_XGB FLUX 是一个基于 XGBOOST 机器学习模型的全球碳循环数据集。该数据集通过对全球植被功能类型&#xff08;PFTs&#xff09;的分类&#xff0c;结合了 FLUXNET、AmeriFlux 和 ICOS 通量站点的现场观测数据…

前端代码分析题(选择题、分析题)——this指向、原型链分析

this指向 普通函数&#xff1a;this 的指向由调用方式决定&#xff0c;可以是全局对象、调用该函数的对象&#xff0c;或者显式指定的对象。箭头函数&#xff1a;this 的指向在定义时确定&#xff0c;始终继承自外层函数作用域的 this&#xff0c;不会被调用方式影响。 var obj…

【SpringBoot】18 上传文件到数据库(Thymeleaf + MySQL)

Git仓库 https://gitee.com/Lin_DH/system 介绍 使用 Thymeleaf 写的页面&#xff0c;将&#xff08;txt、jpg、png&#xff09;格式文件上传到 MySQL 数据库中。 依赖 pom.xml <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j --><depende…

手动搭建 Ghost 博客

操作场景 Ghost 是使用 Node.js 语言编写的开源博客平台&#xff0c;您可使用 Ghost 快速搭建博客&#xff0c;简化在线出版过程。本文档介绍如何在腾讯云云服务器&#xff08;CVM&#xff09;上手动搭建 Ghost 个人网站。 进行 Ghost 网站搭建&#xff0c;您需要熟悉 Linux …

类型转换指令及方法调用与返回指令

我的后端学习大纲 JVM学习大纲 4.类型转换指令&#xff1a; 类型转换指令说明 ①类型转换指令可以将两种不同的数值类型进行相互转换。 这些转换操作一般用于实现用户代码中的显式类型转换操作&#xff0c;或者用来处理字节码指令集中数据类型相关指令无法与数据类型一一对应的…

【LLM Agents体验 3】利用Open-WebUI+Ollama本地部署Qwen2.5:7B大模型的安装指南

Open WebUI是一种基于 Web 的用户界面&#xff0c;用于管理和操作各种本地和云端的人工智能模型。它提供了一个直观的图形化界面&#xff0c;使用户可以方便地加载、配置、运行和监控各种 AI 模型&#xff0c;而无需编写代码或使用命令行界面。 Open-WebUI 是一款功能强大且易于…

动态规划 —— dp 问题-买卖股票的最佳时机IV

前言 在开始之前先说一下本题与 买卖股票的最佳时机Ill 的解法很相似&#xff0c;也可以去参考lll 动态规划 —— dp 问题-买卖股票的最佳时机III-CSDN博客https://blog.csdn.net/hedhjd/article/details/143671809?spm1001.2014.3001.5501 1. 买卖股票的最佳时机IV 题目链接&…

软件测试学习记录 Day1

根据黑马程序员最新版的软件测试课程所做的笔记&#xff0c;需要原件后台私信&#xff1a; 练习提取测试点&#xff1a; 博主的答案&#xff0c;有不一样看法的可评论区讨论&#xff1a;

Kafka 快速入门(一)

1.1安装部署 1.1.1 集群规划 bigdata01bigdata02bigdata03zookeeperzookeeperzookeeperkafkakafkakafka 1.1.2 集群部署 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html 检查三台虚拟机的zk是否启动&#xff1a;zkServer.sh start 默认启动方式 1)解压…

wordpress实用功能A5资源网同款 隐藏下载框 支付框 需要登录才能查看隐藏的内容

实用功能 隐藏下载框 支付框 需要登录才能查看隐藏的内容, 个人网站防天朝申查实测有效 。 登录前&#xff0c;未登录&#xff1a; 登录后&#xff0c;已登录&#xff1a; 功能说明 该代码段的主要功能是隐藏支付框并为未 登录用户显示一条提示信息&#xff0c;告知他们需要…

SQL HAVING子句

SQL 是一种基于“面向集合”思想设计的语言。HAVING 子句是一个聚合函数&#xff0c;用于过滤分组结果。 1 实践 1.1 缺失的编号 图 连续编号记录表t_seq_record 需求&#xff1a;判断seq 列编号是否有缺失。 SELECT 存在缺失的编号 AS res FROM t_seq_record HAVING COUN…

TCP可靠连接的建立和释放,TCP报文段的格式,UDP简单介绍

TCP连接的建立&#xff08;三次握手&#xff09; 建立连接使用的三报文 SYN 报文仅用于 TCP 三次握手中的第一个和第二个报文&#xff08;SYN 和 SYN-ACK&#xff09;&#xff0c;用于初始化连接的序列号。数据传输阶段不再使用 SYN 标志。 SYN 报文通常只携带连接请求信息&a…

【量化交易笔记】14.模拟盘效果

说明 距离上一篇的量化文章有一段时间&#xff0c;应小伙伴要求&#xff0c;继续写下去&#xff0c;我思考了一下&#xff0c;内容有很多&#xff0c;绝大多数是研究的过程&#xff0c;并且走的是弯路&#xff0c;分享了怕影响大伙&#xff0c;之前因为行情不好&#xff0c;研…

FPGA实现以太网(二)、初始化和配置PHY芯片

系列文章目录 FPGA实现以太网&#xff08;一&#xff09;、以太网基础知识 文章目录 系列文章目录一、MDIO协议介绍二、PHY芯片管脚以及结构框图三、MDIO帧时序介绍3.1 MDIO帧格式3.2 MDIO写时序3.3 MDIO读时序 四、PHY芯片常用寄存器描述4.1 基本模式控制寄存器&#xff08;0…

【韩老师零基础30天学会Java 】06章 数组、排序和查找

第六章 数组、排序和查找 1. 数组&#x1f6a9;&#x1f6a9; 数组介绍&#xff1a; 数组可以存放多个同一类型的数据。数组也是一种数据类型&#xff0c;是引用类型。即:数组就是一组数据。 示例&#xff1a; double [] hens{3,5,1,3,4,2,50,7.8,88.8,1.1,5}; double totalWe…

基于Zynq FPGA对雷龙SD NAND的测试

文章目录 SD NAND特征SD卡简介1.2 SD卡块图 SD卡样片Zynq测试平台搭建测试流程SOC搭建软件搭建 测试结果总结 SD NAND特征 SD卡简介 雷龙的SD NAND有很多型号&#xff0c;在测试中使用的是CSNP4GCR01-AMW与CSNP32GCR01-AOW。芯片是基于 NAND FLASH 和 SD控制器实现的SD卡。具…

在Linux上部署(MySQL Redis Elasticsearch等)各类软件

实战章节&#xff1a;在Linux上部署各类软件 前言 为什么学习各类软件在Linux上的部署 在前面&#xff0c;我们学习了许多的Linux命令和高级技巧&#xff0c;这些知识点比较零散&#xff0c;同学们跟随着课程的内容进行练习虽然可以基础掌握这些命令和技巧的使用&#xff0c…

电脑不显示wifi列表怎么办?电脑不显示WiF列表的解决办法

有用户会遇到电脑总是不显示wifi列表的问题&#xff0c;但是不知道要怎么解决。随着无线网络的普及和使用&#xff0c;电脑无法显示WiFi列表的问题有时会让人感到困扰。电脑不显示WiFi列表是很常见的问题&#xff0c;但这并不意味着你无法连接到网络。不用担心&#xff0c;这个…

Android中Activity启动的模式

在 Android 开发中&#xff0c;Activity 的启动模式&#xff08;Launch Mode&#xff09;定义了当启动一个 Activity 时&#xff0c;系统会如何处理它的实例。不同的启动模式可以影响 Activity 在任务栈中的管理方式&#xff0c;对用户的使用体验产生直接影响。下面详细介绍四种…