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

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

在 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、方法…

git常用命令+搭vscode使用

1.克隆远程代码 git clone http:xxx git clone ssh:xxx clone的url 中 https和 ssh是有区别的: git中SSH和HTTP连接有什么区别-CSDN博客 当然https拉下来的代码每次pull /push都需要验证一次自己的账户和密码,可以config进行配置不用每次手敲: 解决VScode中每次git pu…

我的docker随笔45:在龙芯平台安装docker

本文介绍在龙芯平台安装docker。 前言 2017年下半年开始接触docker时&#xff0c;那会李大锤刚刚会爬&#xff0c;而今年&#xff08;2024年&#xff09;下半年&#xff0c;李大锤已经是一个经常考得C并且经常和妹妹吵架的二年级学生了。这么多年就过去&#xff0c;docker一直…

GitLab 如何跨版本升级?

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

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

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

hive alter table add columns 是否使用 cascade 的方案

结论 alter table xxx add columns 时加上 cascade 时&#xff0c;会把所有的分区都加上此字段。如果不加则只有新的分区会加上此字段&#xff0c;旧的分区没有此字段&#xff0c;即便数据文件里有对应的数据&#xff0c;也不能显示内容。 如果分区都是 insert overwrite 生成…

C#笔记(3)

好的OOP程序--->模块合理、结构清晰、程序规范、注释明确、运行流畅、维护容易、扩展方法。 OOP是学习各种编程的原则、方法、技巧、经验、模式、架构等。 所有面向对象的编程语言&#xff0c;都是把我们要处理的”数据“和”行为“封装到类中。 1、设计类 2、关联类 3…

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;你需要确保已经安装…

C++组合复用中,委托的含义与作用

委托&#xff08;Delegation&#xff09;的含义与作用 委托是一种软件设计技术&#xff0c;它允许一个对象在处理某个请求时&#xff0c;将请求的处理责任转移给另一个对象。委托的核心思想是通过组合&#xff08;composition&#xff09;而不是继承&#xff08;inheritance&a…

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

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

.Net Core根据文件名称自动注入服务

.Net Core根据文件名称自动注入服务 说明分析逻辑所有代码一键注入 说明 这个适用于.Net Core 的Web项目,且需要在服务中注入接口的需求.因为之前些Java Web习惯了,所以会有Dao层,Serivce层和Controller层.但是如果一个项目里面对于不同的数据库会有多个Dao,如果一个一个引入会…

鸿蒙版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 …

【人工智能】深入理解LSTM:使用Python构建文本生成模型

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门&#xff01; 文本生成是自然语言处理中的一个经典任务&#xff0c;应用广泛&#xff0c;包括写作辅助、文本自动化生成等。循环神经网络&#xff08;RNN&#xff09;和长短期记忆&#xff08;LSTM&#xff0…

【洛谷】T539823 202411D Phoenix

题目背景 So are you gonna die today or make it out aliveYou gotta conquer the monster in your head and then youll flyFly Phoenix flyIts time for a new empireGo bury your demons then tear down the ceilingPhoenix fly 选自《Phoenix》。 题目描述 凤凰妈妈有 n…

Scala的Array(1)

Scala的Array表示长度不可变的数组&#xff0c;若需要定义可变数组需要倒包 import scala.collection.mutable.ArrayBuffer 下面是关于Array的一些用法&#xff1a; import scala.collection.mutable.ArrayBufferobject test29 { // //不可变数组 Array // def main(args:…

反转链表

反转链表 给你单链表的头节点 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…