Vue 3 – Wie verwende ich Komponenten und Mixins in der Root-Komponente?

Question

Ich habe versucht, die Syntax von Vue 2 in Vue 3 zu konvertieren, bin mir aber nicht sicher, wie ich mixins einbinden soll, wenn Sie dies für Vue 2 sehen Code:

App importieren aus "./App.vue";

const app = new Vue({
  Mixins: [globalMixin],
  Router,
  el: '#app',
  speichern,
  Komponenten: {
     Ding,
       Hallo
  },
  rendern: h => h(App)
});

Dies ist die Syntax für Vue 3, wenn ich sie richtig verstehe:

const app = createApp(App)
App
.use(store)
.use(Router)
 
app.mount('#app')

Das Beispiel für Vue 2 enthält ein Mixin und zwei Komponenten, aber wie füge ich sie zur Syntax von Vue 3 hinzu? Sie können eine Komponente hinzufügen, indem Sie Folgendes tun: app.component('Thing', Thing), aber das ist nur eine Komponente ... sollte ich sie einzeln hinzufügen? Wie wäre es mit dem Einmischen?

Answer 1

在Vue 3中，你可以使用应用程序API mixin方法。

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

const app = createApp(App)

app.mixin(globalMixin)

app.mount('#app')

对于组件，你可以逐个添加它们。我更喜欢这种方式，因为它更清晰。

Answer 2

在Vue 3中，可以在根组件中进行本地组件注册和混入（在尝试避免污染全局命名空间时非常有用）。使用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')

逐个注册组件似乎是一个好方法，特别是如果只有几个组件。

演示