在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。当你使用组件时，你可以通过传递属性值来设置这些参数。
以下是定义可以接收参数的组件的步骤：
使用 <script> 而不是 <script setup>
vue
复制
<template>
<div>
<h1>{{ message }}</h1>
<!-- 假设你有一个需要传入的 prop，名为 "propName" -->
<p>{{ propName }}</p>
</div>
</template>
<script>
export default {
props: {
// 定义 propName 属性
// 这里可以设置它的类型、默认值、验证等
propName: {
type: String, // 指定 prop 的类型
required: true, // 指定 prop 是否为必填项
default: 'default value' // 指定 prop 的默认值
},
// 你可以继续定义其他 prop
},
data() {
return {
message: 'Hello, Vue 3 Component!'
}
}
}
</script>
使用 <script setup> 语法糖
当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。但是，你可以使用 defineProps 宏来声明 props，这是 Vue 3 的 <script setup> 编译时特性之一。
vue
复制
<template>
<div>
<h1>{{ message }}</h1>
<p>{{ propName }}</p>
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
// 使用 defineProps 来声明 prop
const props = defineProps({
propName: {
type: String,
required: true,
default: 'default value'
}
})
// 其他组件逻辑...
const message = ref('Hello, Vue 3 Component with <script setup>!')
</script>
在父组件中使用子组件并传递参数
在父组件中，你可以像下面这样使用子组件并传递参数：
vue
复制
<template>
<div>
<ChildComponent :propName="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue' // 引入子组件
export default {
components: {
ChildComponent // 注册子组件
},
data() {
return {
parentMessage: 'This is a message from parent'
}
}
}
</script>
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。这里的冒号（:）是 Vue 的语法糖，用于表示这是一个动态绑定，而不是一个静态字符串。
