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 從 './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 從 './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>