vue3 setup 组件传参

在 Vue 3 的 Composition API 中，可以使用 `setup` 函数来传递参数给组件。下面是一个示例：

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

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

export default {
  props: {
    initialMessage: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 使用 ref 创建响应式数据
    const message = ref(props.initialMessage);

    // 在组件挂载时，执行回调函数
    onMounted(() => {
      console.log('Component mounted');
    });

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

在上述示例中，我们定义了一个 `initialMessage` 属性，并在 `setup` 函数中通过 `props` 参数获取该属性的值。然后，我们使用 `ref` 函数创建了一个响应式数据 `message`，并将 `initialMessage` 的值赋给它。

最后，我们通过 `return` 将 `message` 导出，使其可以在模板中使用。

如果你希望在 `setup` 函数中使用其他的 Vue Composition API，比如 `computed`、`watch` 等，只需在 `setup` 函数内使用它们即可。

希望能对你有所帮助！如果还有其他问题，请随时提问。