2.4 组件间通信Props(父传子)

父组件

在父组件模板上的子组件上加上属性值,属性值就是想要传递给子组件的信息。

例如:

html 复制代码
<template>
<div class="Big-box">
    <testBox :personList="p"></testBox>
</div>
</template>

子组件

子组件接收父子间传递的信息

typescript 复制代码
const x = defineProps(['personList'])

子组件接收规范的父子间传递的信息

typescript 复制代码
const x = defineProps<{personList:Person}>()

子组件接收规范的父子间传递的可选的非必要信息

typescript 复制代码
const x = defineProps<{personList?:Person}>()

子组件接收规范的父子间传递的可选的非必要信息,有默认值

typescript 复制代码
const x = withDefaults(defineProps<{personList?:Person}>(),{
	...
})
相关推荐
独泪了无痕1 天前
viewer.js 安装与配置指南:实现图片预览功能
前端·vue.js
起床学FPGA1 天前
AI回答问题之后,会自动跳到最下面的问题
开发语言·javascript·ecmascript
Fluxart.ai1 天前
电商商品图审核怎么自动化?规则引擎、人工复核与发布门禁
java·前端·自动化
why技术1 天前
AI 写的文章,可能都带着手敲一遍都去不掉的“隐形水印”。
前端·人工智能·后端
愚公搬代码1 天前
【愚公系列】《Android应用案例开发大全》016-LBS类应用掌上杭州(辅助工具类的开发)
android·前端
CodeSheep1 天前
又一个华为天才少年,离职了!
前端·后端·程序员
kyriewen1 天前
面试官说"打开你的AI工具"——我才发现,他考的根本不是写代码
前端·人工智能·面试
IT_陈寒1 天前
Vue的双向绑定把我坑惨了,原来这个场景不能用
前端·人工智能·后端
hunterandroid1 天前
[Android 从零到一] Compose LazyColumn 性能优化:key、稳定性与重组治理
android·前端
lichenyang4531 天前
从一次团队邀请开始:用 React、NestJS 与 Socket.IO 做可靠的实时通知
前端