vue组件之间的通信方式有哪些

在开发过程中,数据传输是一个核心的知识点,掌握了数据传输,相当于掌握了80%的内容。
Vue.js 提供了多种组件间的通信方式,这些方式适应不同的场景和需求。下面是4种常见的通信方式:

1. Props & Events (父子组件通信)

这是最常见的组件间通信方式,适用于父子组件间的数据传递。

Props:父组件通过属性传递数据给子组件。

Events:子组件通过 $emit 触发事件,父组件监听这些事件并做出响应。

示例:

<!-- 父组件 -->
<template><div><ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from parent'};},methods: {handleChildEvent(eventData) {console.log('Received from child:', eventData);}}
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendToParent() {this.$emit('childEvent', 'Hello from child');}}
};
</script>

2. $refs (父组件访问子组件)

父组件可以使用 $refs 访问子组件的实例,从而调用其方法或访问其属性。

示例:

<!-- 父组件 -->
<template><div><ChildComponent ref="childRef"/><button @click="callChildMethod">Call Child Method</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {callChildMethod() {this.$refs.childRef.childMethod();}}
};
</script>
<!-- 子组件 -->
<script>
export default {methods: {childMethod() {console.log('Called child method');}}
};
</script>

3. Event Bus (兄弟组件或非直接父子组件通信)

当组件之间没有直接的父子关系时,可以使用全局事件总线(Event Bus)来进行通信。

示例:

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
<!-- ComponentA.vue -->
<script>
import { EventBus } from './event-bus.js';export default {methods: {sendData() {EventBus.$emit('dataSent', 'Hello from Component A');}}
};
</script>
<!-- ComponentB.vue -->
<script>
import { EventBus } from './event-bus.js';export default {created() {EventBus.$on('dataSent', this.handleData);},beforeDestroy() {EventBus.$off('dataSent', this.handleData);},methods: {handleData(data) {console.log('Received in Component B:', data);}}
};
</script>

4. Vuex (全局状态管理)

当多个组件需要共享状态时,可以使用 Vuex 进行状态管理。

示例:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {sharedData: 'Shared Data'},mutations: {updateSharedData(state, newData) {state.sharedData = newData;}},actions: {setSharedData({ commit }, data) {commit('updateSharedData', data);}},getters: {getSharedData: state => state.sharedData}
});
<!-- App.vue -->
<script>
import { mapGetters, mapActions } from 'vuex';export default {computed: {...mapGetters(['getSharedData'])},methods: {...mapActions(['setSharedData'])}
};
</script>

以上只是 Vue.js 组件间通信的一些基本方式,实际开发中可能还会结合使用其他技巧和模式,如计算属性、混合(mixins)、插槽(slot)等。

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

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

相关文章

Alsa UCM

Alsa Use Case Manager&#xff08;用例管理器&#xff09;描述如何为某些用例&#xff08;如 “播放音频”、“通话”&#xff09;设置 mixer 混频器。它还描述如何修改 mixer 混频器状态以将音频路由到某些输出和输入&#xff0c;以及如何控制这些设备。 这基本上涵盖了 Pul…

1688商品库存查询

目录 下载安装与运行 功能简介 快速入门&#xff08;视频&#xff09; 当前支持的导出项 常用功能 历史商品是什么意思 粘贴商品有什么要求 导入商品需要什么样的模板 单个商品的查看 查看单个商品详情 下载安装与运行 下载、安装与运行 语雀 功能简介 最近一次测…

自下而上语法分析、自上而下语法分析和递归下降法、预测分析法、LL(1)和LR是什么关系

自下而上语法分析、自上而下语法分析、递归下降法、预测分析法、LL(1)和LR都是与语法分析&#xff08;语法解析&#xff09;相关的概念和技术。它们在编译原理中扮演着重要的角色&#xff0c;用于将源代码的字符流转换为语法树&#xff08;或抽象语法树&#xff0c;AST&#xf…

逆序队专题

逆序对的定义是&#xff0c;在一个数组中&#xff0c;对于下标 ( i ) 和 ( j )&#xff08;其中 ( i < j )&#xff09;&#xff0c;如果 ( a[i] > a[j] )&#xff0c;则称 ((a[i], a[j])) 为数组的一个逆序对。 换句话说&#xff0c;逆序对就是在数组中前面的元素大于后…

C++使用Sanp7 实现西门子s7通信

使用Snap7库可以实现与西门子S7系列PLC的通信。以下是一个基本的C示例&#xff0c;演示如何使用Snap7库来连接西门子S7 PLC并读取和写入数据。 环境准备 安装Snap7&#xff1a;从&#xff08;https://sourceforge.net/projects/snap7/files/1.4.2/&#xff09;Snap7官网下载并…

C++算法——埃氏筛

C判断素数&#xff1a;埃氏筛 思路 这个算法是利用打表的方法来计算的&#xff1a; 首先&#xff0c;我们要知道一个特性 就是一个质数的倍数&#xff0c;一定是一个合数 利用这个特性 我们可以写出以下代码 for (int i 2; i * i < n; i) {if (!prime[i] true){for (i…

每日两题7

文章目录 买卖股票的最佳时机含冷冻期买卖股票的最佳时机含手续费 买卖股票的最佳时机含冷冻期 分析&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();vector<vector<int>> dp(n, vector<int>(3…

Python爬取城市空气质量数据并写入mysql数据库

Python爬取城市空气质量数据并写入mysql数据库 这篇文章介绍了如何爬取城市空气质量数据,下面的代码添加了数据库操作,包括使用pymysql创建数据库和数据表,并向数据库中写入数据,完整代码如下: import csv import time import requests # 导入网络请求库requests from bs4…

python为什么要字符串格式化

Python2.6 开始&#xff0c;新增了一种格式化字符串的函数 str.format()&#xff0c;它增强了字符串格式化的功能。相对于老版的%格式方法&#xff0c;它有很多优点。 1.在%方法中%s只能替代字符串类型&#xff0c;而在format中不需要理会数据类型&#xff1b; 2.单个参数可以…

Qt 简易Word

Ui界面如下&#xff1a; 查找和替换界面&#xff1a; 具体代码&#xff1a; GitHub : 简易Word Gitee : 简易Word

【java11】java11新特性之Predicate接口API改进

Java 11向Predicate接口引入了新方法not()来否定类似于negate方法的现有谓词&#xff0c;进一步增强了其功能&#xff0c;使得条件判断和组合更加灵活和方便。 Predicate.not() Predicate.not方法用于创建一个取反的谓词&#xff08;predicate&#xff09;&#xff0c;即返回…

FedAvg论文

论文&#xff1a;Communication-Efficient Learning of Deep Networks from Decentralized Data 原code Reproducing 通过阅读帖子进行的了解。 联邦平均算法就是最典型的平均算法之一。将每个客户端上的本地随机梯度下降和执行模型的平均服务器结合在一起。 联邦优化问题 数…

文案策划背后的秘密 | 职场高手养成记

要想在文案策划这个行当里混&#xff0c;首先得对自己的文字功底有足够的信心&#xff0c;那种“文章独步天下”的气势不可或缺。 要是没有这份自信&#xff0c;我建议你还是另寻他路。 要想跨入文案策划的大门&#xff0c;可以从以下几个方面入手&#xff1a; 1. 学习文案基…

6.7.13 MV-Swin-T:使用多视图 SWIN 变压器进行乳房 X 光检查分类

传统的乳腺癌分类深度学习方法主要集中在单视图分析上。然而,在临床实践中,放射科医生会同时检查乳房 X 线摄影检查中的所有视图,利用这些视图中固有的相关性来有效检测肿瘤。 在本文中,我们提出了一种完全基于 Transformer 的创新多视图网络,以解决乳房 X 线摄影图像分类…

使用docker-compose搭建达梦数据库主备集群

目录 1. Docker集群的搭建 2. 检查主备数据库 3. 主备集群的JDBC连接设置 1. Docker集群的搭建 达梦的镜像文件都是tar文件&#xff0c;通过docker load命令导入&#xff1a; docker load -i dm8_20240422_x86_rh6_64_rq_ent_8.1.3.140.tar 成功导入后&#xff0c;可看到…

Flutter娱乐与休闲类APP常用的第三方库总汇

Flutter娱乐与休闲类APP常用的第三方库总汇 娱乐与休闲类APP为用户提供了丰富的放松和娱乐方式&#xff0c;包括游戏、音乐、视频、阅读等多种形式。Flutter作为一个高效的跨平台移动应用开发框架&#xff0c;为这类应用的开发提供了强大的支持。本文将汇总Flutter娱乐与休闲类…

机器学习笔记——支持向量机

支持向量机 参数模型对分布需要假设&#xff08;这也是与非参数模型的区别之一&#xff09;间隔最大化&#xff0c;形式转化为凸二次规划问题 最大化间隔 间隔最大化是意思&#xff1a;对训练集有着充分大的确信度来分类训练数据&#xff0c;最难以分的点也有足够大的信度将…

68. UE5 RPG 处理多个角色后续bug

我们现在已经有了四个敌人角色&#xff0c;接下来&#xff0c;处理一下在战斗中遇到的问题。 处理角色死亡后还会攻击的问题 因为我们有角色溶解的效果&#xff0c;角色在死亡以后的5秒钟才会被销毁掉。所以在这五秒钟之内&#xff0c;角色其实还是会攻击。主要时因为AI行为树…

AI 大模型重点行业应用情况

1、AI 大模型重点行业应用情况总览 AI大模型将率先在互联网办公、金融等数字化程度较高的行业快速渗透&#xff0c;医疗、交通、 制造等行业的潜在渗透空间大。 2、AI 大模型在金融行业应用情况 金融行业的应用场景丰富&#xff0c;是最早进行数字化转型的机构&#xff0c;因此…

一文了解SpringBoot

1 springboot介绍 1)springboot是什么? Spring Boot是一个用于简化Java应用程序开发的框架。它基于Spring框架,继承了Spring框架原有的优秀特性,比如IOC、AOP等, 他并不是用来代替Spring的解决方案,而是和Spring框架紧密结合,进一步简化了Spring应用的整个搭建和开发过程…