需求
Vue3 父组件传递子组件值
实现
defineProps 属性：用于接收父组件传递过来的数据。
注意：如果 defineProps 接收的参数名，和已有变量名相同，就会造成命名冲突。
defineProps 仅适用于 setup 语法糖
语法格式
// 无限制
const props = defineProps(['参数名', '参数名']);
// 限制数据类型
const props = defineProps({
参数名: String,
参数名: Number,
});
// 限制数据类型、默认值、必填项
const props = defineProps({
参数名: { type: String, required: true },
参数名: { type: Number, required: true },
参数名: { type: String, default: "默认值" },
});
一、父组件：通过自定义属性传递参数。
<template>
<h3>我是父组件</h3>
<hr />
<!-- 通过自定义属性传递 name 和 age -->
<Child :name="info.name" :age="info.age"></Child>
</template>
<script setup>
// 引入组件
import Child from '../components/Child';
import { reactive } from 'vue';
let info = reactive({ name: "张三", age: 18 });
</script>
二、子组件：使用 defineProps 接收数据。
第一种写法：数组写法【无限制】
<template>
<h3>我是子組件</h3>
<p>{{ name }} : {{ age }}</p>
</template>
<script setup>
// 接收父组件传递的数据
const props = defineProps(['name', 'age']);
</script>
注：defineProps 不需要引入，可以直接使用。
第二种写法：对象写法【限制数据类型】
<template>
<h3>我是子組件</h3>
<p>{{ name }} : {{ age }}</p>
</template>
<script setup>
// 接收参数，限制数据类型
const props = defineProps({
name: String,
age: Number,
});
</script>
原文始发于微信公众号（干货食堂）：Vue3 父传子 组件传参
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/258450.html
