vue3 转换为复合 api 然后什么也不显示

Question

我检查了几次，但我的选项 API 在我将其转换为复合 API 后不起作用。我不知道它出了什么问题，而且它没有显示任何错误。然而，它并没有像我的选项 API 那样在屏幕上打印任何内容。它仅显示警告。

runtime-core.esm-bundler.js:40 [Vue warn]: 无法解析组件: 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>

Answer 1

当使用组合 API 定义 Vue SFC。

您可以使用方法 或者您可以使用普通的 和 setup 函数 和可选的defineComponent。

使用

<template>
  <div>
    <OnboardLand />
    <OnboardShow />
  </div>
</template>

<script setup>
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'

// composition goes here...
</script>

使用defineComponent

<template>
  <div>
    <OnboardLand />
    <OnboardShow />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'

export default defineComponent({
  components: {
    OnboardLand,
    OnboardShow,
  },
  setup(props) {
    // composition goes here.
  },
})
</script>