以下是如何在 Vue 3 的 Composition API 中使用 props
的步骤:
- 定义组件并声明 props
首先,你需要在子组件中声明 props
。这可以通过在组件的 <script>
标签内使用 defineProps
函数来完成。
html
<template>
<div>
{{ message }}
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: {
type: String,
required: true,
default: 'Hello from props!'
}
});
</script>
在这个例子中,我们定义了一个名为 message
的 prop
,并指定了它的类型为 String
。我们还设置了 required
属性为 true
,表示这个 prop
是必须的,并为其提供了一个默认值 'Hello from props!'
。
- 在父组件中使用子组件并传递 props
接下来,在父组件中,你可以像平常一样使用子组件,并通过属性 (attributes) 的方式传递 props
。
html
<template>
<ChildComponent :message="parentMessage" />
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMessage = ref('Hello from parent!');
</script>
- 在子组件中使用 props
在子组件的 setup
函数中,通过 defineProps
定义的 props
可以直接作为变量使用。在我们的例子中,message
prop
可以在模板中直接通过 {``{ message }}
访问,也可以在 setup
函数内的其他逻辑中使用。
确保你已经安装了 Vue 3,并且你的项目配置正确地支持了 Vue 3 的 Composition API 和 <script setup>
语法。<script setup>
是 Vue 3 的一个新特性,它允许你在 <script>
标签内直接编写 Composition API 的代码,而无需显式地导出任何东西。这大大简化了组件的编写过程。