vue3 在＜script setup＞使用props

在 Vue 3 中，你可以在 <script setup> 中使用 props 来接收父组件传递的属性。

下面是一个使用 <script setup> 的示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: String,
    required: true
  }
});

console.log(props.message);

// 可以在这里编写其他逻辑

export default {
  props
};
</script>

在示例中，我们首先导入 defineProps 函数，并使用它来定义 props 对象。我们定义了一个名为 message 的属性，指定了它的类型为 String，且为必需属性。

然后，我们通过 console.log(props.message) 打印传入的 message 属性。

在 <script setup> 中可以编写其他逻辑，例如计算属性、方法等。

最后，我们使用 export default 导出 props 对象，以便在模板中使用。

希望这个示例能帮助你理解在 Vue 3 中在 <script setup> 中使用 props 的方式。