＜script setup＞形式中props传值

在 <script setup> 形式中，我们可以使用 defineProps() 函数来声明组件的 props。它接收一个对象作为参数，对象的键是 prop 的名称，值是 prop 的类型。

以下是一个使用 <script setup> 形式和 props 传值的示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
// 声明一个 props
const props = defineProps({
  message: String
})
// 可以直接使用 props 对象中的属性
console.log(props.message)
</script>

在上面的例子中，我们使用 defineProps() 函数声明了一个名为 message 的 prop，它的类型是字符串。然后，我们可以在模板中使用 props.message 来获取传递给组件的值。在 <script setup> 中，我们可以直接访问 props.message。在上面的例子中，我们在控制台中打印了传递给组件的 message 值。

这种使用 <script setup> 形式和 defineProps() 来声明和使用 props 的方式与以前在组件中使用 props 的方式相似，但有了更简洁的语法。