＜script setup＞形式中props传值

父组件中

<template>
  <div class="about">
    <aaa title="1"></aaa>
    <aaa title="2"></aaa>
    <aaa title="3"></aaa>
  </div>
</template> 

<script setup>
import aaa from '@/views/a.vue'

</script>

子组件

<template>
    <h1>{{ title }}</h1>
</template>

<script lang="ts">
export default {
    props:['title']
}
</script>

<style lang="less" scoped>

</style>

将上述代码转换为使用`<script setup>`形式

在`<script setup>`语法中，我们将`defineProps`函数的返回值赋值给`props`常量，以便在组件中使用它。

<template>
  <!-- 在模板中使用props -->
  <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 定义props
const props = defineProps({
  title: String,
});
</script>

在`<script setup>`中，我们使用`defineProps`函数来定义`props`。在这个函数中，我们传递一个对象，其中键是属性的名称，值是属性的类型。在这种情况下，我们将`title`定义为字符串类型。然后，我们可以在模板中使用`title`属性，就像在常规Vue组件中一样。

请注意，`<script setup>`是Vue 3.2版本引入的新特性，用于简化组件的设置语法。它可以将模板、脚本和样式组合在一个单独的`<script setup>`块中，使代码更加简洁和易读。

`import { defineProps } from 'vue'` 是从Vue库中导入`defineProps`函数。

`defineProps`是Vue 3提供的一个函数，用于定义组件的属性（props）。它接收一个属性定义对象作为参数，并返回一个代表属性的对象。

通过使用`defineProps`，我们可以明确指定组件所需的属性及其类型。这样做的好处是，它提供了类型检查和属性验证，确保我们在使用属性时遵循正确的类型和规则。

在上述示例中，我们使用`defineProps`来定义组件的`title`属性，并指定它的类型为字符串。这将告诉Vue，`title`属性是必需的，并且它的值应该是字符串类型。