vue3 组件间通信

父组件-->子组件  传递数据

父组件通过绑定的属性 :customProperty 传给子组件,子组件通过 defineProps 接收数据

<!-- 父组件(ParentComponent.vue) --><template><div><ChildComponent :message="parentMessage" /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const parentMessage = ref('Hello from Parent');
</script>
<!-- 子组件(ChildComponent.vue) --><template><div><p>{{ message }}</p></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({    // 接收 message 这个属性的值message: {type: String,required: true}
});
</script>
子组件-->父组件  传递数据

子组件emit发射事件,父组件监听事件并获取传过来的数据。

<!-- 子组件(ChildComponent.vue) 发射事件--><template><div><button @click="sendToParent">Send to Parent</button></div>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['customEvent']);const sendToParent = () => {emit('customEvent', 'Hello from Child');
};
</script>
<!-- 父组件(ParentComponent.vue) --><template><div><ChildComponent @customEvent="handleCustomEvent" /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const handleCustomEvent = (data) => {console.log('Received from Child:', data);
};
</script>

父组件 <----> 子组件 双向绑定数据

父子组件使用 v-model 进行通信本质上是通过【props + @自定义事件】实现的双向绑定的。

实际上即使不是组件间的通信,对于组件内的双向绑定 v-model 的底层实现实际上也是通过【属性绑定 + 事件监听】来实现的 ,可以说 v-model是【属性绑定 + 事件监听】的语法糖。

  • 父组件:使用 v-model 指令绑定一个数据到子组件。
  • 子组件:通过 props 接收父组件传递的数据,并通过 emit (发射事件)将数据的变化通知父组件
<!--
父组件 (ParentComponent.vue)父组件通过 v-model 绑定 inputValue 到子组件的 modelValue。--><template><div><InputComponent v-model="inputValue" /><p>Input Value: {{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';
import InputComponent from './InputComponent.vue';// 父组件的数据
const inputValue = ref('');
</script>
<!--
子组件 (InputComponent.vue)
子组件通过 props 接收 modelValue,并通过事件 update:modelValue 将变化通知父组件
---><template><div><input :value="modelValue" @input="updateValue" /></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue';// 定义接收的 props
const props = defineProps({modelValue: {type: String,required: true}
});// 定义触发的事件
const emit = defineEmits(['update:modelValue']);// 当输入框内容变化时,触发事件通知父组件
const updateValue = (event) => {emit('update:modelValue', event.target.value);
};
</script>

祖先组件和后代组件之间共享数据

(1)祖先组件提供数据 provide

(2) 后代组件注入数据

<!-- 祖先组件(AncestorComponent.vue)--><template><div><ChildComponent /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { provide } from 'vue';const sharedData = 'Data from Ancestor';
provide('sharedData', sharedData);
</script>
<!--后代组件(ChildComponent.vue)--><template><div><p>{{ sharedData }}</p></div>
</template><script setup>
import { inject } from 'vue';const sharedData = inject('sharedData');
</script>

虽然 provide/inject 主要设计用于祖先组件向后代组件传递数据,但也可以通过一些变通方法实现反向数据流。 -->  祖先组件提供一个响应式对象,即用reactive而不是ref ,后代组件修改这个对象也会反映到祖先组件中。

<!--祖先组件提供一个响应式对象,后代组件可以修改这个对象,从而影响祖先组件的数据 --><template><div><ChildComponent /><p>Shared Count: {{ sharedState.count }}</p></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { reactive, provide } from 'vue';const sharedState = reactive({ count: 0 });
provide('sharedState', sharedState);
</script>
<template><div><button @click="incrementCount">Increment Count</button></div>
</template><script setup>
import { inject } from 'vue';const sharedState = inject('sharedState');const incrementCount = () => {sharedState.count++;
};
</script>

另外也可以 祖先组件提供一个修改其内部状态的方法,后代组件调用这个方法来改变祖先组件的状态。

<template><div><ChildComponent /><p>Count: {{ count }}</p></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref, provide } from 'vue';const count = ref(0);const incrementCount = () => {count.value++;
};provide('incrementCount', incrementCount);
</script>
<template><div><button @click="incrementCount">Increment Count</button></div>
</template><script setup>
import { inject } from 'vue';const incrementCount = inject('incrementCount');
</script>

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

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

相关文章

开发“校园帮”小程序:从构思到上线的完整指南

目录 开发“校园帮”小程序&#xff1a;从构思到上线的完整指南1. 需求分析和规划确定目标用户功能需求竞争分析技术可行性 2. 项目计划时间规划团队分工预算 3. 原型设计线框图用户流程图UI设计 4. 技术选型开发工具技术栈 5. 开发设置开发环境前端开发后端开发接口联调 6. 测…

xcode配置快速打开终端命令行工具教程

以往我们使用idea编辑器或者vscode编辑器的时候&#xff0c;我们可以快速的在编辑器下面打开终端进行相关的操作&#xff0c;但是在xcode里面却没有这么方便的功能按钮&#xff0c;真的不是很习惯&#xff0c;所以这次就来给xcode配置这么一个方便的功能。 idea的Terminal 这…

chris csp练习

n个球放入m个盒子中&#xff0c;有多少种放法 #include <iostream> #include <algorithm> using namespace std;int n, m, ans 2e8, dxy[4][2] { {0, 1}, {1, 0}, {0, -1}, {-1, 0} }; char c[110][110]; bool a[110][110]; int h 1, t 0, q1[11000], q2[1100…

qt 操作相机笔记

目录 查看相机个数 查看相机个数 配置文件&#xff1a; QT multimedia #include <QCameraInfo> #include <QDebug>void listCameras() {QList<QCameraInfo> cameras QCameraInfo::availableCameras();foreach (const QCameraInfo &cameraInfo, cam…

2024年蓝桥杯Web开发【大赛大纲】15届

一、 组别 Web应用开发分为&#xff1a;大学组和职业院校组。 每位选手只能申请参加其中一个组别的竞赛。各个组别单独评奖。 研究生和本科生只能报大学组。 其它高职高专院校可自行选择报任意组别。 二. 竞赛赛程 省赛时长&#xff1a;4小时。 决赛时长&#xff1a;4小…

H3CNE-5-IP子网划分(二)

可用主机地址个数&#xff1a; 2^n-2 &#xff08;n为主机位&#xff09; 主机位全0 子网地址 192.168.1.0 255.255.255.0 192.168.1.128 255.255.255.128 172.16.2.192 255.255.255.224 主机位全1 广播地址 192.168.1.255 255.255.255.0 192.168.1.127 255.255.255.1…

豆瓣电影后端设计

sql脚本 -- douban.tags_encode definitionCREATE TABLE tags_encode (id bigint NOT NULL AUTO_INCREMENT COMMENT 自增主键,tag varchar(100) NOT NULL COMMENT tag中文名,tag_encode varchar(100) NOT NULL COMMENT tag转encode,type varchar(100) NOT NULL DEFAULT movie …

SpringCloud微服务04-Elasticsearch-DSL查询-聚合

一、Elasticsearch 搜索引擎&#xff0c;响应速度非常快&#xff0c;特别是对大数据量的情况 1.初始elasticsearch 如果只需要商品搜索&#xff0c;百度这种搜索网站&#xff0c;只需要第二个就够了 docker部署&#xff1a;day08-Elasticsearch - 飞书云文档 (feishu.cn) e…

【Andoird开发】android获取蓝牙权限,搜索蓝牙设备MAC

<!-- Android 12以下才需要定位权限&#xff0c; Android 9以下官方建议申请ACCESS_COARSE_LOCATION --><uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name"android.permission.ACCES…

创建FreeRTOS工程

创建STM32CubeMX工程 配置时钟 配置FreeRTOS 生成Keil MDK的工程 打开工程 结尾 这就是我们用STM32CubeMX创建的最基本的一个FreeRTOS的工程。可以看到&#xff0c;这个与我们使用stm32开发的裸机程序有相同的地方&#xff0c;也有不同的地方&#xff0c;我们可以发现&am…

MySQL 8.4.0 LTS 变更解析:I_S 表、权限、关键字和客户端

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ MySQL 8.4.0 LTS 已经发布 &#xff0c;作为发版模型变更后的第一个长期支持版本&#xff0c;注定要承担未来生产环境的重任&#xff0c;那么这个版本都有哪些新特性、变更&#xff0c;接下来少…

Ubuntu系统上安装NVIDIA驱动【笔记】

Ubuntu上安装NVIDIA驱动&#xff0c;您可以按照以下步骤操作&#xff1a; 首先&#xff0c;您需要配置软件源&#xff08;根据情况配置&#xff0c;否则影响更新和下载速度&#xff09;。 接下来&#xff0c;您可以按照上一条回答中的步骤来安装新的NVIDIA驱动。首先&#xff…

YOLOv5模型的快速推理方法

一 概述 ultralytics 开发的目标检测算法 YOLOv5 有着广泛的应用&#xff0c;在速度和精准度上做了良好的平衡&#xff0c;被很多商业化开发所采纳。本文档主要记录使用 pip 安装的方式快速的部署推理 YOLOv5 的模型文件, yolov5 的原始模型文件为 .pt . 本文档适用于 yolov5…

2024.5.6力扣刷题记录-二叉树学习记录5(未完)

一、学习视频 【二叉树的层序遍历【基础算法精讲 13】】 https://www.bilibili.com/video/BV1hG4y1277i/?share_sourcecopy_web&vd_sourcedc0e55cfae3b304619670a78444fd795 二、跟练代码 1.102. 二叉树的层序遍历 # Definition for a binary tree node. # class Tree…

Sui生态DeFi项目Cetus和Aftermath宣布启动孵化器

Sui DeFi中的去中心化交易所Cetus和Aftermath Finance联合Sui基金会宣布启动新的孵化器&#xff0c;为初创项目提供更多可行性途径。这两个DeFi项目在Sui上有着较长的历史&#xff0c;自去年一同与主网推出以来&#xff0c;目前在TVL方面位居前五。这两个项目的持久性和成功使它…

国产数据库TiDB的常用方法

TiDB的常用方法主要涉及安装配置、数据操作、性能调优以及监控和维护等方面。以下是对这些常用方法的归纳和介绍&#xff1a; 1. 安装与配置 安装TiDB&#xff1a;根据官方文档的指引&#xff0c;用户可以按照步骤进行TiDB的安装。配置TiDB&#xff1a;安装完成后&#xff0c…

curl: (60) SSL certificate problem: self-signed certificat

目录&#xff1a; 1、背景2、测试结果 1、背景 今天帮忙客户排查问题&#xff0c;报错请求超时&#xff0c;但是ping客户的ip以及测试端口都是通的&#xff0c;最终不得不从中台服务器上发起请求客户回调接口&#xff0c;报错如下&#xff1a; 怀疑是客户的证书有问题&#xf…

什么是以太坊?

以太坊&#xff08;Ethereum&#xff09;是一个开源的区块链平台&#xff0c;它支持智能合约和去中心化应用&#xff08;dApps&#xff09;。由Vitalik Buterin于2015年推出&#xff0c;以太坊为开发者提供了一个灵活的编程环境&#xff0c;使他们能够在区块链上创建和部署各种…

C语言.数据结构.顺序表

1.顺序表的概念及结构 1.1线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是线性结构&#xff0c;…

C++ char[]、char*、const char*、string 相互转换

在写C代码时&#xff0c;会经常用到char[]、char*、const char*、string 相互转换&#xff0c;现总结如下&#xff0c;供大家参考。 原类型目标类型转换代码char[]char*char ch[] "test string"; char *c ch;char[]const char*char ch[] "test string"…