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

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

在 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.mzph.cn/bicheng/60891.shtml

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

相关文章

使用Element UI实现前端分页,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量

文章目录 一、前端分页1、模板部分 (\<template>)2、数据部分 (data)3、计算属性 (computed)4、方法 (methods) 二、跨页选择1、模板部分 (\<template>)2、数据部分 (data)3、方法 (methods) 三、限制数量1、模板部分 (\<template>)2、数据部分 (data)3、方法…

GitLab 如何跨版本升级?

本分分享 GitLab 跨版本升级的一些注意事项。 众所周知&#xff0c;GitLab 的升级必须要严格遵循升级路径&#xff0c;否则就会出现问题&#xff0c;导致升级失败。因此&#xff0c;在 GitLab 升级之前需要做好两件事情&#xff1a; 当前版本的确认升级路径的确认 极狐GitLa…

网上商城系统设计与Spring Boot框架

3 系统分析 当用户确定开发一款程序时&#xff0c;是需要遵循下面的顺序进行工作&#xff0c;概括为&#xff1a;系统分析–>系统设计–>系统开发–>系统测试&#xff0c;无论这个过程是否有变更或者迭代&#xff0c;都是按照这样的顺序开展工作的。系统分析就是分析系…

LabVIEW 实现 find_nearest_neighbors 功能(二维平面上的最近邻查找)

1. 背景介绍 在数据分析和图像处理领域&#xff0c;经常需要查找给定点的最近邻居点。在LabVIEW中&#xff0c;计算二维平面上多个点之间的欧氏距离&#xff0c;并返回距离最近的几个点是一种常见操作。find_nearest_neighbors 函数用于实现这个功能。 2. 欧氏距离计算 在二维…

Python如何从HTML提取img标签下的src属性

目录 前提准备步骤1. 解析HTML内容2. 查找所有的img标签3. 提取src属性 完整代码 前提准备 在处理网页数据时&#xff0c;我们经常需要从HTML中提取特定的信息&#xff0c;比如图片的URL。 这通常通过获取img标签的src属性来实现。 在开始之前&#xff0c;你需要确保已经安装…

nacos-operator在k8s集群上部署nacos-server2.4.3版本踩坑实录

文章目录 操作步骤1. 拉取仓库代码2. 安装nacos-operator3. 安装nacos-server 坑点一坑点二nacos-ui页面访问同一集群环境下微服务连接nacos地址配置待办参考文档 操作步骤 1. 拉取仓库代码 &#xff08;这一步主要用到代码中的相关yml文件&#xff0c;稍加修改用于部署容器&…

鸿蒙版APP-图书购物商城案例

鸿蒙版-小麦图书APP是基于鸿蒙ArkTS-API12环境进行开发&#xff0c;不包含后台管理系统&#xff0c;只有APP端&#xff0c;页面图书数据是从第三方平台(聚合数据)获取进行展示的&#xff0c;包含登录&#xff0c;图书类别切换&#xff0c;图书列表展示&#xff0c;图书详情查看…

Vulnhub靶场案例渗透[8]- HackableII

文章目录 一、靶场搭建1. 靶场描述2. 下载靶机环境3. 靶场搭建 二、渗透靶场1. 确定靶机IP2. 探测靶场开放端口及对应服务3. 扫描网络目录结构4. ftp文件上传漏洞5. 反弹shell6. 提权 一、靶场搭建 1. 靶场描述 difficulty: easy This works better with VirtualBox rather t…

Pycharm 配置 Poetry

Python 环境安装 参考以下&#xff1a; 官网安装步骤 CODA方式安装 Poetry 安装 Poetry在windows下的安装使用 1.下载软件包 下载地址 2.获取安装脚本下载地址 3.使用命令安装 打开cmd&#xff0c;进入安装包和脚本文件所在目录&#xff0c;执行命令&#xff1a; python …

反转链表

反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1…

【Docker】Mac安装Docker Desktop导致磁盘剩余空间较少问题如何解决?

目录 一、背景描述 二、解决办法 三、清理效果 四、理论参考 解决方法 1. 清理未使用的 Docker 镜像、容器和卷 2. 查看 Docker 使用的磁盘空间 3. 调整 Docker 的存储位置 4. 增加磁盘空间 5. 调整 Docker Desktop 配置 6. 使用 Docker 清理工具&#xff08;例如 D…

SQL Server 查询设置 - LIKE/DISTINCT/HAVING/排序

目录 背景 一、LIKE - 模糊查询 1. 通配符 % 2. 占位符 _ 3. 指定集合 [] 3.1 表示否定 ^ 3.2 表示范围 - 4. 否定 NOT 二、DISTINCT - 去重查询 三、HAVING - 过滤查询 四、小的查询设置 1. ASC|DESC - 排序 2. TOP - 限制 3. 子查询 4. not in - 取补集&…

Android OpenGL ES详解——立方体贴图

目录 一、概念 二、如何使用 1、创建立方体贴图 2、生成纹理 3、设置纹理环绕和过滤方式 4、激活和绑定立方体贴图 三、应用举例——天空盒 1、概念 2、加载天空盒 3、显示天空盒 4、优化 四、应用举例——环境映射:反射 五、应用举例——环境映射:折射 六、应用…

pipx安装提示找不到包

执行&#xff1a; pipx install --include-deps --force "ansible6.*"WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConnection …

VMware 17虚拟Ubuntu 22.04设置共享目录

VMware 17虚拟Ubuntu 22.04设置共享目录 共享文件夹挂载命令&#xff01;&#xff01;&#xff01;<font colorred>配置启动自动挂载Chapter1 VMware 17虚拟Ubuntu 22.04设置共享目录一、卸载老版本二、安装open-vm-tools<font colorred>三、配置启动自动挂载四、添…

Python用CEEMDAN-LSTM-VMD金融股价数据预测及SVR、AR、HAR对比可视化

全文链接&#xff1a;https://tecdat.cn/?p38224 分析师&#xff1a;Duqiao Han 股票市场是一个复杂的非线性系统&#xff0c;股价受到许多经济和社会因素的影响。因此&#xff0c;传统的线性或近线性预测模型很难有效、准确地预测股票指数的价格趋势。众所周知&#xff0c;深…

ubuntu20.04默认的python3.8升级到python3.10

Python 3.8 于 2019 年 10 月发布&#xff0c;距今已有五年时间。2024 年 10 月是 Python 3.8 版本发布的最后一个月&#xff0c;从 2024 年 10 月开始&#xff0c;如果存在安全错误&#xff0c;Python 开发团队将不会修复该错误。有必要把python3.8升级python3.10。 新加apt源…

数据结构 ——— 层序遍历链式二叉树

目录 链式二叉树示意图​编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同&#xff0c;前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式&#xff0c;如上图&#xff1a;层序遍历的…

DevOps工程技术价值流:加速业务价值流的落地实践与深度赋能

DevOps的兴起&#xff0c;得益于敏捷软件开发的普及与IT基础设施代码化管理的革新。敏捷宣言虽已解决了研发流程中的诸多挑战&#xff0c;但代码开发仅是漫长价值链的一环&#xff0c;开发前后的诸多问题仍亟待解决。与此同时&#xff0c;虚拟化和云计算技术的飞跃&#xff0c;…

python json详解

json 是 Python 中用于处理 JSON 数据的标准库。JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人类阅读和编写&#xff0c;同时也易于机器解析和生成。Python 的 json 模块提供了将 Python 对象与 JSON 数据相互转换的功…