Vue 3 - Comment utiliser les composants et les mixins dans le composant racine ?

Question

J'ai essayé de convertir la syntaxe de Vue 2 en Vue 3 mais je ne sais pas comment inclure mixins et components Code : 

importer l'application depuis "./App.vue" ;

const app = nouvelle Vue({
  mixins : [globalMixin],
  routeur,
  el : '#app',
  magasin,
  Composants: {
     Chose,
       Bonjour
  },
  rendu : h => h(App)
});</pré>
<p>Voici la syntaxe de Vue 3, si je la comprends bien : </p>
<pre class="brush:php;toolbar:false;">const app = createApp(App)
application
.use (magasin)
.use (routeur)
 
app.mount('#app')

L'exemple pour Vue 2 a un mixin et deux composants, mais comment puis-je les ajouter à la syntaxe de Vue 3 ? Vous pouvez ajouter un composant en faisant : app.component('Thing', Thing), mais ce n'est qu'un composant... dois-je les ajouter un par un ? Et si on se fondait dans la masse ?

Answer 1

Dans Vue 3, vous pouvez utiliser les méthodes de mixage de l'API d'application.

import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './globalMixin'

const app = createApp(App)

app.mixin(globalMixin)

app.mount('#app')

Pour les composants, vous pouvez les ajouter un par un. Je préfère cette façon parce que c'est plus clair.

Answer 2

Dans Vue 3, l'enregistrement des composants locaux et les mixins sont possibles dans le composant racine (utile pour éviter de polluer l'espace de noms global). Utilisez l'option extends选项来扩展App.vue的组件定义，然后添加自己的mixins和components :

import { createApp } from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'
import Thing from './components/Thing.vue'
import globalMixin from './globalMixin'

createApp({
  extends: App,
  mixins: [globalMixin],
  components: {
    Hello,
    Thing,
  }
}).mount('#app')

Enregistrer les composants un par un semble être une bonne approche, surtout s'il n'y a que quelques composants.

Démo