Vue 3 中使用 props 允许父组件向子组件传递数据

在 Vue 3 中使用 props 是组件化开发的基础，允许父组件向子组件传递数据。

定义组件并声明 props

在子组件中，需要在 props 选项里声明你想要接收的数据。这里有几种方式来声明 props：

1. 单个字符串形式

export default {
  props: ['title'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.title)
  }
}

请注意，上面的代码中，setup() 函数在组件实例创建之前执行，这意味着它是在 created、mounted 等生命周期钩子之前执行的。

如果是在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

<script setup>
const props = defineProps(['title'])

console.log(props.title)
</script>

2. 对象形式

对象形式可以为 props 设置类型、默认值、必需性等。

export default {
  props: {
    title: String, // 类型
    likes: {
      type: Number,
      default: 0 // 默认值
    },
    isPublished: {
      type: Boolean,
      required: true // 必需的
    }
  }
}

如果是在使用 <script setup> 的单文件组件中，

// 使用 <script setup>
defineProps({
    title: String, // 类型
    likes: {
      type: Number,
      default: 0 // 默认值
    },
    isPublished: {
      type: Boolean,
      required: true // 必需的
    }
  })

在父组件中传递 props

在父组件的模板中，可以通过子组件的标签上使用 v-bind 或简写为 :，将数据传递给子组件。

<ChildComponent :title="parentTitle" :likes="parentLikes" :isPublished="parentIsPublished" />

这里的 parentTitle、parentLikes 和 parentIsPublished 是父组件中的数据。

在子组件中使用 props

在子组件的模板中，可以像使用组件内部的数据一样使用 props。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ likes }} likes</p>
    <p v-if="isPublished">Published</p>
  </div>
</template>

在这个例子中，{{ title }}、{{ likes }} 和 v-if="isPublished" 都是使用从父组件传递来的 props。

注意事项

• props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
• 不要在子组件内部直接修改 props，因为这会破坏组件的独立性。如果需要，可以使用本地数据副本，或者使用 computed 属性。
• 使用 : 是用来传递属性的，但是如果要传递对象，则使用 v-bind （详细查看官方文档）

参考

官方文档：
组件基础 | 传递 props
完整文档