vue3 converti en API composite puis n'affiche rien

Question

J'ai vérifié plusieurs fois mais mon API d'options ne fonctionne pas après l'avoir convertie en API composite. Je ne sais pas ce qui ne va pas et il ne montre aucune erreur. Cependant, il n'imprime rien à l'écran comme le fait mon API d'options. Il affiche uniquement des avertissements.

runtime-core.esm-bundler.js:40 [Vue warn] : Impossible de résoudre le composant : onboardland S'il s'agit d'un élément personnalisé natif, assurez-vous de l'exclure de la résolution des composants via

Voici mon API composite, qui ne fonctionne pas

<template>
  <div>
    <à bord />
    <onboardshow />
  </div>
</modèle>

<script>
importer onboardland depuis './onboardland.vue'
importer onboardshow depuis './onboardshow.vue'

exporter par défaut {
  installation() {
    retour {
      Composants: {
        à bord,
        spectacle à bord
      }
    } ;
  }
} ;
</script>

Voici les options d'exécution api

<template>
  <div>
    <à bord />
    <onboardshow />
  </div>
</modèle>

<script>
importer onboardland depuis './onboardland.vue'
importer onboardshow depuis './onboardshow.vue'

exporter par défaut {
  Composants: {
    à bord,
    spectacle à bord
  }
}
</script>

Answer 1

Lors de l'utilisation de la définition de l'API de composition Vue SFC.

Vous pouvez utiliser la method ou vous pouvez utiliser le normal et setup fonction 方法 或者您可以使用普通的 和 setup 函数 和可选的defineComponent et facultative

.

Utilisez

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

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

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

defineComponentUtilisez

🎜

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