Vue 3 - Bagaimana untuk menggunakan komponen dan campuran dalam komponen akar?

Question

Saya cuba menukar sintaks daripada Vue 2 kepada Vue 3 tetapi saya tidak pasti cara untuk memasukkan mixins dan komponen Kod:

import Apl daripada "./App.vue";

aplikasi const = Vue baharu({
  campuran: [globalMixin],
  penghala,
  el: '#app',
  kedai,
  komponen: {
     Perkara,
       Hello
  },
  render: h => h(App)
});

Ini ialah sintaks untuk Vue 3, jika saya memahaminya dengan betul:

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

Contoh untuk Vue 2 mempunyai campuran dan dua komponen, tetapi bagaimana saya boleh menambahkannya pada sintaks Vue 3? Anda boleh menambah komponen dengan melakukan: app.component('Thing', Thing), tetapi itu hanya satu komponen... patutkah saya menambahnya satu demi satu? Bagaimana pula dengan campuran?

Answer 1

Dalam Vue 3, anda boleh menggunakan kaedah campuran API aplikasi.

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

const app = createApp(App)

app.mixin(globalMixin)

app.mount('#app')

Untuk komponen, anda boleh menambahnya satu persatu. Saya lebih suka cara ini kerana ia lebih jelas.

Answer 2

Dalam Vue 3, pendaftaran komponen tempatan dan campuran boleh dilakukan dalam komponen akar (berguna apabila cuba mengelak daripada mencemarkan ruang nama global). Gunakan pilihan 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')

Mendaftar komponen satu persatu nampaknya pendekatan yang baik, terutamanya jika terdapat hanya beberapa komponen.

Demo