vue3组合式如何使用自定义的组件

Vue3中的组合式API（Composition API）提供了一种新的组织应用结构的方式，使得代码更加模块化和可复用。如果你想在组合式API中使用自定义组件，可以按照以下步骤操作：

1. 定义自定义组件：首先，创建一个普通的Vue组件，就像平时那样编写HTML模板、数据和生命周期钩子。

<!-- CustomComponent.vue -->
<template>
  <div>
    <slot></slot> <!-- 传递给父组件的内容 -->
  </div>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: { /* 如果有props则添加 */
    message: String,
  },
  methods: {}, /* 添加你需要的方法 */
}
</script>

2. 在组合式API中引用并使用组件：在需要的地方导入组件，并通过`setup`函数来注册组件实例，或者直接使用它。

// 使用import引入组件
import CustomComponent from './CustomComponent.vue';

// 在setup函数中使用
setup() {
  return {
    customInstance: ref(null), // 使用ref来管理组件实例

    mounted() {
      this.customInstance = new CustomComponent(); // 初始化组件
    },

    // 当需要更新组件属性时
    updateMessage(newMessage) {
      this.customInstance.message = newMessage;
    }
  };
}

// 或者直接在模板里使用（假设在App.vue这样的顶层组件）
<template>
  <CustomComponent :message="customMessage" /> <!-- 传入prop值 -->
</template>
<script>
import CustomComponent from './CustomComponent.vue';
const App = {
  setup() {
    const customMessage = computed(() => 'Hello, Custom Component!'); // 计算属性
    return { customMessage };
  },
  components: {
    CustomComponent
  }
};
</script>