Vue 3 - 如何将组件和混入与根组件一起包含？

Question

我尝试将语法从 Vue 2 转换为 Vue 3，但如果您在 Vue 2 中看到以下代码，我不确定如何包含 mixins和Components ：

import App from "./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)但这只是一个组件...我应该以这种方式一一添加它们吗？那么 mixin 呢？

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

一次注册一个组件似乎是一种可行的方法，尤其是在只有几个组件的情况下。

演示