Vue3学习（组合式API——父、子组件间通信详解）

目录

一、组合式API下的父组件传子组件。(自定义属性)

（1）基本思想。

（2）核心注意点。(defineProps)

（3）传递简单类型数据。

（4）传递对象类型数据。(v-bind="对象类型数据")

（5）传递响应式类型数据。(:属性="响应式数据")

（6）defineProps原理简要分析。

二、组合式API下的子组件传父组件。(自定义事件)

（1）基本思想。

（2）核心注意点。

<1>事件驱动通信。

<2>单向数据流原则。

<3>核心实现步骤。

（3）页面渲染时子组件立即向父组件传递数据。

（4）基于子组件的事件函数向父组件传递数据。

三、Vue3组合式API中的父、子组件间通信小结。

一、组合式API下的父组件传子组件。(自定义属性)

（1）基本思想。
  1. 父组件中给子组件绑定属性。(propsXXX)
  2. 子组件内部通过props选项（setup中使用defineProps：“编译器宏”）接收。
（2）核心注意点。(defineProps)
  1. 单向数据流：数据从父组件流向子组件，子组件不直接修改父组件数据。
  2. 声明式接收：子组件通过 defineProps 声明要接收的属性（props），明确数据类型和校验规则。
  3. 响应式绑定：父组件通过 ref 或 reactive 创建响应式数据。用 ":" 动态绑定到子组件属性，数据变化时子组件自动更新。
（3）传递简单类型数据。
  • 父组件代码示例。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";</script><template><div><h2>我是父组件</h2><Son propsCar="宝马5系" /></div>
</template><style scoped>
</style>
  • 子组件代码示例。
<script setup>
//因为写在setup中，无法直接配置props选项
//借助于“编译器宏"函数接收子组件传递的数据
const props = defineProps({propsCar : String
})
console.log('子组件获取：',props)
//脚本中获取属性需要通过props.xxx获取
console.log('子组件获取属性值：',props.propsCar)
</script><template>
<!-- 对于模版中，可以直接使用props传递的值 --><div class="son">我是子组件------{{propsCar}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 页面渲染效果。

（4）传递对象类型数据。(v-bind="对象类型数据")
  • 父组件代码示例。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";
const data = {name: "张三",age: 18
}
</script><template><div><h2>我是父组件</h2><Son v-bind="data" />
<!-- 第2种写法也可以   <Son :="data" />--></div>
</template><style scoped>
</style>
  • 子组件代码示例。
<script setup>
//因为写在setup中，无法直接配置props选项
//借助于“编译器宏"函数接收子组件传递的数据
const props = defineProps({name: String,age : Number
})
console.log('子组件获取：',props)
//脚本中获取属性需要通过props.xxx获取
console.log('子组件获取属性值：',props.name)
console.log('子组件获取属性值：',props.age)
</script><template>
<!-- 对于模版中，可以直接使用props传递的值 --><div class="son">我是子组件------{{name}}------{{age}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 页面渲染效果。

（5）传递响应式类型数据。(:属性="响应式数据")
  • 父组件代码示例。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";
import {ref} from "vue";
const money = ref(100)
const addMoney = () =>{money.value++
}
</script><template><div><h2>我是父组件---当前父组件money：{{money}}<button @click="addMoney">money++</button></h2><Son :propsMoney="money" /></div>
</template><style scoped>
</style>
  • 子组件代码示例。
<script setup>
//因为写在setup中，无法直接配置props选项
//借助于“编译器宏"函数接收子组件传递的数据
import {watch} from "vue";const props = defineProps(['propsMoney'])
console.log('页面首页渲染子组件获取：',props)
//脚本中获取属性需要通过props.xxx获取
//监听父组件传递的响应式数据是否变化
watch(() => props.propsMoney, (newValue) => {//每变化一次就打印一次console.log('子组件获取更新的money值：',newValue)
})
</script><template>
<!-- 对于模版中，可以直接使用props传递的值 --><div class="son">我是子组件------父组件传递的money：{{propsMoney}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 页面渲染效果。

（6）defineProps原理简要分析。
  • 本质上是编译阶段的一个标识。实际当编译器解析时，遇到后会进行编译转换。

二、组合式API下的子组件传父组件。(自定义事件)

（1）基本思想。
  1. 父组件中给子组件通过@绑定事件。
  2. 子组件内部通过emit方法触发事件。
（2）核心注意点。
<1>事件驱动通信。
  • 子组件通过自定义事件向父组件发送数据。父组件监听这些事件并处理数据。
  • 子组件使用defineEmits声明可触发的事件。通过emit触发事件并传递参数。
<2>单向数据流原则。
  • 子组件不直接修改父组件数据，而是通过事件通知父组件自行更新。
<3>核心实现步骤。
  1. 子组件步骤。
  • 声明事件：const emit = defineEmits(['事件名',...,])。
  • 触发事件：emit ('需触发的事件名',{需携带的参数...})。
  1. 父组件步骤。
  • 监听事件：子组件标签<Xxx @子组件触发的事件名="父组件中处理事件的方法">。
  • 处理事件：在对应的方法中更新自身状态。
（3）页面渲染时子组件立即向父组件传递数据。
  • 父组件页面初始渲染效果。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({name:'张三',addr:'湖南长沙'
})</script><template><div><h2>我是父组件---当前父组件响应式数据：姓名：{{data.name}} 地址：{{data.addr}}</h2><Son /></div>
</template><style scoped>
</style>

  • 子组件自定义事件向父组件传递新值。
<script setup>//通过defineEmits编译器宏声明事件、emit方法
const emit = defineEmits(['changeValue'])
//页面渲染时直接触发自定义的事件并进行传参
emit('changeValue',{name : '李四',addr : '湖北武汉'
})
</script><template><div class="son">我是子组件</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 父组件监听子组件（自定义事件）传递的数据。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({name:'张三',addr:'湖南长沙'
})const getValue = (res) => {console.log('子组件传递的数据：',res);data.name = res.name;data.addr = res.addr;
};</script><template><div><h2>我是父组件---当前父组件响应式数据：姓名：{{data.name}} 地址：{{data.addr}}</h2>
<!--  @后面跟的必须和子组件的事件名一致  -->
<!--  getValue：处理子组件传递的数据，更新自身状态  --><Son @change-value="getValue" /></div>
</template><style scoped>
</style>
  • 页面最终渲染效果。

（4）基于子组件的事件函数向父组件传递数据。
  • 基本实现：当子组件输入框的内容并按钮提交（事件函数触发），通过自定义事件的触发将对应的参数通过子组件传递到父组件。
  • 子组件代码示例。
<script setup>//通过defineEmits编译器宏声明事件、emit方法
import {ref} from "vue";const emit = defineEmits(['submitInput'])const inputValue = ref('')
//在子组件的对应事件函数上触发子组件向父组件传值的自定义事件
const changeInput = () =>{emit('submitInput',{input: inputValue.value})
}
</script><template><div class="son"><h3>我是子组件</h3><div style="padding: 10px"><input type="text" v-model="inputValue">输入框的值：{{inputValue}}<button @click="changeInput">提交（子传父）</button></div></div></template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 父组件代码示例。
<script setup>
//局部子组件（导入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({value:'哈哈哈哈我是父组件的响应式',
})const getInputValue = (res) => {console.log('子组件传递的数据：',res);data.value = res.input;
};</script><template><div><h2>我是父组件---当前父组件响应式数据：{{data.value}}</h2>
<!--  @后面跟的必须和子组件的事件名一致  -->
<!--  getValue：处理子组件传递的数据，更新自身状态  --><Son @submitInput="getInputValue" /></div>
</template><style scoped>
</style>
  • 页面渲染效果。

三、Vue3组合式API中的父、子组件间通信小结。

  1. 父传子过程中通过 defineProps({属性名:类型,...}) 方式接收props。
  2. setup语法糖中通过 const props=defineProps({属性名:类型,...})、props.xxx 使用父组件传递的数据。而在模版中可以直接通过属性名使用。
  3. 子传父过程中通过 defineEmits(['事件名',...]) 方式得到emit方法。
  4. 触发事件：emit('事件名',需传递的参数) 。父组件通过@事件名即可监听。

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

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

相关文章

W5500使用ioLibrary库创建TCP客户端

W5500使用ioLibrary库创建TCP客户端

1、WIZnet全硬件TCP/IP协议栈 WIZnet全硬件TCP/IP协议栈,支持TCP,UDP,IPv4,ICMP,ARP,IGMP以及PPPoE协议。 以太网&#xff1a;支持BSD和WIZCHIP&#xff08;W5500/W5300/W5200/W5100/W5100S&#xff09;的SOCKET APIs驱动程序。 互联网&#xff1a; DHCP客户端 DNS客户端 FTP客…
阅读更多...
管理Oracle Data Guard的最佳实践

管理Oracle Data Guard的最佳实践

Oracle Data Guard的中文名字叫数据卫士&#xff0c;顾名思义&#xff0c;它是生产库的一道保障。所以管理Data Guard是DBA的一项重要工作之一&#xff0c;管理Data Guard时主要有以下几个注意点需要引起重视。 备份库的归档日志积压 一般情况下&#xff0c;生产库的归档日志是…
阅读更多...
BootCDN介绍（Bootstrap主导的前端开源项目免费CDN加速服务）

BootCDN介绍（Bootstrap主导的前端开源项目免费CDN加速服务）

文章目录 BootCDN前端开源项目CDN加速服务全解析什么是BootCDN技术原理与架构CDN技术基础BootCDN架构特点1. 全球分布式节点网络2. 智能DNS解析系统3. 高效缓存管理机制4. 自动同步更新机制5. HTTPS和HTTP/2协议支持 BootCDN的核心优势速度与稳定性开源免费资源丰富度技术规范遵…
阅读更多...
2025 Java 微信小程序根据code获取openid，二次code获取手机号【工具类】拿来就用

2025 Java 微信小程序根据code获取openid，二次code获取手机号【工具类】拿来就用

一、controller调用 /*** 登录** author jiaketao* since 2024-04-10*/ RestController RequestMapping("/login") public class LoginController {/*** 【小程序】登录获取session_key和openid** param code 前端传code* return*/GetMapping("/getWXSessionKe…
阅读更多...
软件架构风格系列（3）：管道 - 过滤器架构

软件架构风格系列（3）：管道 - 过滤器架构

文章目录 前言一、从生活场景到架构原理&#xff0c;看懂管道 - 过滤器的核心逻辑&#xff08;一&#xff09;什么是管道 - 过滤器架构&#xff1f;&#xff08;二&#xff09;核心组件拆解 二、架构设计图&#xff1a;一图看懂管道 - 过滤器架构全貌三、Java 示例代码&#xf…
阅读更多...
【VIM】vim 常用命令

【VIM】vim 常用命令

文章目录 插入模式光标移动拷贝/粘贴/删除/撤销块操作分屏代码缩进命令组合使用其他PowerVim 前言&#xff1a;本文内容大部分摘抄自酷壳和博客园   –   CoolShell – 陈皓   博客园 – 易先讯 插入模式 a → 在光标后插入o → 在当前行后插入一个新行O → 在当前行前插…
阅读更多...
polarctf-web-[简单rce]

polarctf-web-[简单rce]

考点&#xff1a; (1)RCE(eval函数) (2)执行函数(passthru函数) (3)/顶级(根)目录查看 (4)sort排序查看函数 题目来源&#xff1a;Polarctf-web-[简单rce] 解题&#xff1a; 代码审计 <?php/*​PolarD&N CTF​*/highlight_file(__FILE__);function no($txt){ # …
阅读更多...
HarmonyOs开发之———使用HTTP访问网络资源

HarmonyOs开发之———使用HTTP访问网络资源

谢谢关注&#xff01;&#xff01; 前言&#xff1a;上一篇文章主要介绍HarmonyOs开发之———Video组件的使用:HarmonyOs开发之———Video组件的使用_华为 video标签查看-CSDN博客 HarmonyOS 网络开发入门&#xff1a;使用 HTTP 访问网络资源 HarmonyOS 作为新一代智能终端…
阅读更多...
Vue 图片预览功能（含缩略图）

Vue 图片预览功能（含缩略图）

众所周知&#xff0c;常见的组件库如Element、Ant Design&#xff0c;自带的图片预览功能都没有缩略图&#xff0c;所以 需要单独封装一个图片预览的服务。 第三方库&#xff1a;v-viewer 安装&#xff1a; npm install v-viewer viewerjs 若使用报错&#xff0c;可安装指定…
阅读更多...
手写tomcat：基本功能实现（4）

手写tomcat：基本功能实现（4）

逻辑架构 HTTP 请求与 Socket&#xff1a; 左侧的 “HTTP 请求” 箭头指向 “socket”&#xff0c;表示客户端发送的 HTTP 请求通过 socket 传输到服务器。Socket 负责接收请求&#xff0c;并提取出其中的 请求路径&#xff08;如 /first&#xff09;和 请求方法&#xff08;如…
阅读更多...
jvm安全点(一)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞

jvm安全点(一)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞

1. 信号处理入口​​ ​​JVM_HANDLE_XXX_SIGNAL​​ 是 JVM 处理信号的统一入口&#xff0c;负责处理 SIGSEGV、SIGBUS 等信号。​​javaSignalHandler​​ 是实际注册到操作系统的信号处理函数&#xff0c;直接调用 JVM_HANDLE_XXX_SIGNAL。 ​​2. 安全点轮询页的识别​​ …
阅读更多...
微信小程序：封装表格组件并引用

微信小程序：封装表格组件并引用

一、效果 封装表格组件，在父页面中展示表格组件并显示数据 二、表格组件 1、创建页面 创建一个components文件夹，专门用于存储组件的文件夹 创建Table表格组件 2、视图层 (1)表头数据 这里会从父组件中传递表头数据，这里为columns，后续会讲解数据由来 循环表头数组，…
阅读更多...
【FMC216】基于 VITA57.1 的 2 路 TLK2711 发送、2 路 TLK2711 接收 FMC 子卡模块

【FMC216】基于 VITA57.1 的 2 路 TLK2711 发送、2 路 TLK2711 接收 FMC 子卡模块

产品概述 FMC216 是一款基于 VITA57.1 标准规范的 2 路 TLK2711 接收、2 路 TLK2711 发送 FMC 子卡模块。该板卡支持 2 路 TLK2711 数据的收发&#xff0c;支持线速率 1.6Gbps&#xff0c;经过 TLK2711 高速串行收发器&#xff0c;可以将 1.6Gbps 的高速串行数据解串为 16 位并…
阅读更多...
K8S Gateway API 快速开始、胎教级教程

K8S Gateway API 快速开始、胎教级教程

假设有如下三个节点的 K8S 集群&#xff1a; ​​ k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、Gateway 是什么 背景和目的 入口&#xff08;Ingress&#xff09;目前已停止更新。新的功能正在集成至网关 API 中。在 Kubernetes …
阅读更多...
时序数据库IoTDB分布式架构解析与运维指南

时序数据库IoTDB分布式架构解析与运维指南

一、IoTDB分布式架构概述 分布式系统由一组独立的计算机组成&#xff0c;通过网络通信&#xff0c;对外表现为一个统一的整体。IoTDB的原生分布式架构将服务分为两个核心部分&#xff1a; ‌ConfigNode&#xff08;CN&#xff09;‌&#xff1a;管理节点&#xff0c;负责管理…
阅读更多...
Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

Ubuntu 20.04 LTS 中部署 网页 Node.js 应用 Nginx 跨域配置 的详细步骤 一、准备工作1、连接服务器2、更新系统 二、安装 Node.js 环境1、安装 Node.js 官方 PPA&#xff08;用于获取最新稳定版&#xff09;&#xff1a;2、安装 Node.js 和 npm&#xff08;LTS 长期支持版本…
阅读更多...
3DVR制作的工具或平台

3DVR制作的工具或平台

3DVR&#xff08;三维虚拟现实&#xff09;是利用三维图像技术和虚拟现实技术&#xff0c;将真实场景进行三维扫描并转换成计算机可识别的三维模型&#xff0c;使用户能够在虚拟空间中自由漫游&#xff0c;体验身临其境的感觉。3DVR技术结合了全景拍摄和虚拟现实&#xff0c;提…
阅读更多...
垂直智能体：企业AI落地的正确打开方式

垂直智能体：企业AI落地的正确打开方式

在当前AI浪潮中&#xff0c;许多企业急于跟进&#xff0c;推出自己的AI智能体解决方案。然而&#xff0c;市场上大量出现的"万能型"智能体却鲜有真正解决实际问题的产品。本文将探讨为何企业应该专注于开发垂直领域智能体&#xff0c;而非追求表面上的全能&#xff0…
阅读更多...
软件工程各种图总结

软件工程各种图总结

目录 1.数据流图 2.N-S盒图 3.程序流程图 4.UML图 UML用例图 UML状态图 UML时序图 5.E-R图 首先要先了解整个软件生命周期&#xff1a; 通常包含以下五个阶段&#xff1a;需求分析-》设计-》编码 -》测试-》运行和维护。 软件工程中应用到的图全部有&#xff1a;系统…
阅读更多...
王者荣耀游戏测试场景题

王者荣耀游戏测试场景题

如何测试一个新英雄&#xff1a;方法论与实践维度 测试一个新英雄不仅仅是“打打打”&#xff0c;而是一套完整的测试流程&#xff0c;包括设计文档验证、功能验证、数值验证、性能验证、交互验证等。可以从以下多个角度展开&#xff1a; &#x1f50d; 1. 方法论维度 ✅ 测试…
阅读更多...
最新文章

Copyright @ 2022~2023