vue3 组合式 props

在Vue 3中，组合式API是一种新的编写组件逻辑的方式，它提供了更灵活和可组合的方式来管理组件的状态和行为。其中，props是组合式API中的一个重要概念。
在Vue 3中，通过setup函数来编写组件的逻辑，而不再使用传统的data、methods等选项。在setup函数中，我们可以使用props来接收父组件传递的属性值。
使用组合式API的props有以下几个特点：

props是一个响应式的对象，可以在模板中直接使用。
可以通过类型声明和默认值来定义props的属性类型和默认值。
可以通过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的值赋给响应式的变量，并在模板中使用。