vue3使用组合式api的props传参

在 Vue 3 中，使用组合式 API 的方式来传递 props 需要使用 `setup` 函数。下面是一个示例：

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

<script>
import { ref, onMounted } from 'vue';

export default {
  props: {
    initialMessage: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const message = ref(props.initialMessage);

    // 在组件挂载后执行
    onMounted(() => {
      // 修改 message 的值
      message.value = 'Hello from setup!';
    });

    return {
      message
    };
  }
};
</script>

在上面的示例中，我们通过 `props` 参数接收父组件传递的 `initialMessage` 属性。然后使用 `ref` 创建一个响应式引用 `message`，并将 `props.initialMessage` 的值赋给它。通过 `onMounted` 钩子函数，在组件挂载后修改 `message` 的值。

最后，我们将 `message` 对象返回，以便在模板中可以通过插值表达式 `{{ message }}` 访问到它。

请注意，组合式 API 的使用方式与 Vue 2 的 Options API 有所不同，需要将 `props` 参数传递给 `setup` 函数，并且返回一个包含响应式数据的对象。