vue3 ditukar kepada api komposit kemudian tidak memaparkan apa-apa

Question

Saya menyemak beberapa kali tetapi API pilihan saya tidak berfungsi selepas saya menukarnya kepada API komposit. Saya tidak tahu apa yang salah dengannya dan ia tidak menunjukkan sebarang ralat. Walau bagaimanapun, ia tidak mencetak apa-apa ke skrin seperti yang dilakukan oleh API pilihan saya. Ia hanya menunjukkan amaran.

runtime-core.esm-bundler.js:40 [Vue warn]: Tidak dapat menyelesaikan komponen: onboardland Jika ini ialah elemen tersuai asli, pastikan untuk mengecualikannya daripada peleraian komponen melalui

Ini api komposit saya, tidak berfungsi

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

<skrip>
import onboardland daripada './onboardland.vue'
import onboardshow daripada './onboardshow.vue'

eksport lalai {
  persediaan() {
    kembali {
      komponen: {
        onboardland,
        onboardshow
      }
    };
  }
};
</script>

Berikut ialah pilihan berjalan api

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

<skrip>
import onboardland daripada './onboardland.vue'
import onboardshow daripada './onboardshow.vue'

eksport lalai {
  komponen: {
    onboardland,
    onboardshow
  }
}
</script>

Answer 1

Apabila menggunakan definisi API komposisi Vue SFC.

Anda boleh menggunakan kaedah atau anda boleh menggunakan dan setup fungsi 方法 或者您可以使用普通的 和 setup 函数 和可选的defineComponent dan pilihan

.

Gunakan

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

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

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

defineComponentGunakan

🎜

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