Vue 父传子组件传参 defineProps

defineProps 属性：用于接收父组件传递过来的数据。

注意：如果 defineProps 接收的参数名，和已有变量名相同，就会造成命名冲突。

语法格式：

// 无限制
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>

注：Vue 不允许使用 key、ref 等关键字作为属性名。

二、子组件：使用 defineProps 接收数据。

<template>
  <h3>我是子組件</h3>
  <p>{{ name }} : {{ age }}</p>
</template>

<script setup>
// 接收父组件传递的数据
const props = defineProps(['name', 'age']);
</script>

注：defineProps 不需要引入，可以直接使用。

三、最终效果。

原创作者：吴小糖

创作时间：2023.12.6