Vue3选项式API转组合式API后页面无内容，组件解析警告

转换Vue3组件到组合式API后，页面无法渲染目标内容，仅出现警告：
runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: onboardland

无法工作的组合式API代码 #

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'

export default {
  setup() {
    return {
      components: {
        onboardland,
        onboardshow
      }
    };
  }
};
</script> 

可正常工作的选项式API代码 #

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'

export default {
  components: {
    onboardland,
    onboardshow
  }
}
</script>

问题原因 #

组件注册属于Vue组件的顶层选项配置，而setup()函数的返回值仅用于向模板暴露响应式数据、方法等内容，不能用来注册组件。你将components对象放在setup()的返回值中，Vue无法识别这是需要注册的组件，因此模板无法解析<onboardland>和<onboardshow>标签。

解决方法 #

方法1：保留选项式组件注册，结合setup函数 #

将components配置放在组件选项顶层，setup()专注处理组合式API逻辑：

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'

export default {
  components: {
    onboardland,
    onboardshow
  },
  setup() {
    // 在这里编写组合式API的业务逻辑
    return {
      // 返回模板需要的响应式数据或方法
    };
  }
};
</script>

方法2：使用Vue3推荐的<script setup>语法 #

<script setup>是Vue3专门为组合式API设计的语法糖，导入的组件会自动注册，无需手动声明components选项：

<template>
  <div>
    <onboardland />
    <onboardshow />
  </div>
</template>

<script setup>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'
// 导入后组件自动注册，可直接在模板中使用
</script>

内容的提问来源于stack exchange，提问作者Nopmd