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

Question

J'ai essayé de convertir la syntaxe de Vue2 en Vue3 mais je ne sais pas comment inclure les mixins et les composants, si vous voyez ce code pour Vue2 : importAppfrom"./App.vue";constapp=newVue({mixins:[globalMixin], routeur,el:'#app',store,components:{Thing,Hello},render:h=

P粉680000555 · Answer

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.

P粉776412597 · Answer

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