javascript vue3转换为复合API,然后不显示任何内容

kh212irz  于 2023-02-02  发布在  Java
关注(0)|答案(1)|浏览(122)

我检查了几次,但是我的option API在我转换成复合API后是可以工作的,我不知道它出了什么问题,它没有显示任何错误,但是它没有像我的option API那样在屏幕上打印任何东西,它只显示一个警告。
运行时核心. esm-bundler. js:40 [Vue警告]:无法解析组件: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>
y1aodyip

y1aodyip1#

当使用组合API定义Vue SFC内部的组件时,您可以在Vue 3中使用不同的样式。
您可以使用<script setup> approach,也可以将普通<script>setup function和可选defineComponent配合使用。

带有<script setup>

<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>

相关问题