Vue 3 - 如何在根組件中使用組件和混入？

Question

我嘗試將語法從Vue 2轉換為Vue 3，但我不確定如何包含mixins和components，如果你看到了這個Vue 2的代碼：

import App 從 "./App.vue";

const app = new Vue({
  mixins: [globalMixin],
  router,
  el: '#app',
  store,
  components: {
     Thing,
       Hello
  },
  render: h => h(App)
});

這是Vue 3的語法，如果我理解正確的話：

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

Vue 2的範例中有一個mixin和兩個元件，但我要如何將它們加入Vue 3的語法呢？ 你可以透過這樣​​做來添加一個元件：app.component('Thing', Thing)，但那隻是一個元件...我應該一個一個地添加它們嗎？那混入呢？

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

逐一註冊元件似乎是一個好方法，特別是如果只有幾個元件。

示範