vue3怎么使用props

在Vue 3中，使用props的方式与Vue 2相比略有不同，主要是因为Vue 3引入了Composition API，不过在Options API中使用props的基本方式保持一致。下面我将介绍如何在Vue 3的Options API和Composition API中使用props。

### 使用Options API

在Options API中，你可以像在Vue 2中一样定义props。例如：

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

<script>
export default {
  props: {
    message: String // 定义一个字符串类型的prop
  }
}
</script>

在父组件中，你可以这样传递prop：

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  }
}
</script>

### 使用Composition API

在Composition API中，你通常会使用`defineProps`宏来定义props，它会根据传递给它的对象自动推断类型。这种方式仅适用于使用单文件组件（.vue文件）。例如：

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

const props = defineProps({
  message: String // 使用defineProps来定义props
});
</script>

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

如果是在普通的JavaScript文件中使用Composition API，你需要这样定义props：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 你可以访问props中的message属性
    console.log(props.message);
  }
})

在这个例子中，你可以在父组件中像在Options API中那样传递props。

### 注意事项
- 当你在Options API中使用`props`对象时，Vue会自动为你提供这些值，你无需导入它们。
- 在Composition API中使用`defineProps`时，它会自动将props注入到当前组件中。
- 使用`defineProps`定义props仅限于单文件组件。