Vue中父子组件数据传递

父子组件数据传递

Vue中，父子组件数据传递应遵循单向数据流原则，比如，构建一个博客，可能需要一个表示博客文章的组件，并且，所有的博客文章使用相同的视觉布局，但内容却不相同。要实现这样的效果自然必须向组件中传递数据，例如文章标题、内容，这时就会使用到 props选项。

props 是一种特殊的 attributes属性，可以在组件上声明注册。比如，要传递给博客文章组件一个标题，必须在组件的 props 列表上声明它（选项式API），或者使用 defineProps 宏函数声明注册（组合式API）。

defineProps()在组件中声明属性

组合式API中，defineProps 是一个仅在 <script setup> 可构建组件中可用的编译宏命令，该命令不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props：

<!-- BlogPost.vue -->
<script setup>
defineProps(['title']) // 子组件中声明一个title属性
</script>

<template>
  <h4>{
  { title }}</h4>
</template>

defindeProps()中的属性配置选项

为满足vue对传入的props属性的校验要求，如属性类型校验、添加属性默认值、实现属性的特殊校验等，更详细的props属性配置如下示例所示，

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello&