vue3语法糖怎么使用props

Vue 3中使用`props`通常与Vue 2的方式没有太大的差异，但是Vue 3提供了一些语法糖（syntactic sugar），使得代码更加简洁。下面是一个Vue 3中使用props的例子：

首先，在父组件中，你可以使用`defineProps`来声明接收的props。`defineProps`是一个编译时函数，它允许你在组件内部声明props，而不需要在外部定义它们，它在开发模式下提供类型检查，并且在生产构建中被移除。

<template>
  <ChildComponent :user="user" />
</template>

<script>
import { defineProps } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const user = ref({ name: 'John', age: 30 });
    
    // 使用 defineProps 声明props
    const props = defineProps({
      user: Object,
    });

    // 现在可以使用 props.user 访问prop
    return {};
  },
};
</script>

在子组件中，你可以直接使用`defineProps`来接收props，也可以通过`setup`函数中的参数来接收props：

<template>
  <div>
    <p>Hello, {{ props.user.name }}!</p>
  </div>
</template>

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

export default {
  setup(props) {
    // props 对象包含了传入的props，可以在这里直接使用
  },
};
</script>

或者使用Vue 3 Composition API的`defineComponent`：

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    user: {
      type: Object,
      required: true,
    }
  },
  setup(props) {
    // 在 setup 函数中访问props
    return {};
  },
});
</script>

在使用TypeScript时，你还可以利用`defineProps`的泛型参数来获得props的类型推断：

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<{ name: string; age: number }>,
      required: true,
    }
  },
  setup(props) {
    // 使用 TypeScript 强类型
  },
});
</script>