vue3 组合式 props

在Vue 3中，组合式API是一种新的编写组件逻辑的方式，它提供了更灵活和可组合的方式来管理组件的状态和行为。其中，`props`是组合式API中的一个重要概念。

在Vue 3中，通过`setup`函数来编写组件的逻辑，而不再使用传统的`data`、`methods`等选项。在`setup`函数中，我们可以使用`props`来接收父组件传递的属性值。

使用组合式API的`props`有以下几个特点：
1. `props`是一个响应式的对象，可以在模板中直接使用。
2. 可以通过类型声明和默认值来定义`props`的属性类型和默认值。
3. 可以通过`emit`函数来向父组件派发事件。

下面是一个示例代码，展示了如何使用组合式API中的`props`：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import { ref, defineProps } from 'vue';

export default {
  props: {
    title: {
      type: String,
      default: 'Default Title',
    },
    content: {
      type: String,
      default: 'Default Content',
    },
  },
  setup(props) {
    // 使用props
    const title = ref(props.title);
    const content = ref(props.content);

    return {
      title,
      content,
    };
  },
};
</script>

在上面的代码中，我们使用`defineProps`函数来定义`props`，并在`setup`函数中通过`props`参数来接收父组件传递的属性值。然后，我们可以将`props`的值赋给响应式的变量，并在模板中使用。