Vue 3 - Bagaimana untuk menggunakan komponen dan campuran dalam komponen akar?
P粉340980243
P粉340980243 2023-08-24 16:25:32
0
2
633
<p>Saya cuba menukar sintaks daripada Vue 2 kepada Vue 3 tetapi saya tidak pasti cara untuk memasukkan <em>mixins</em> dan <em>komponen</em> Kod: </p> <pre class="brush:php;toolbar:false;">import Apl daripada "./App.vue"; aplikasi const = Vue baharu({ campuran: [globalMixin], penghala, el: '#app', kedai, komponen: { Perkara, Hello }, render: h => h(App) });</pre> <p>Ini ialah sintaks untuk Vue 3, jika saya memahaminya dengan betul: </p> <pre class="brush:php;toolbar:false;">const app = createApp(App) aplikasi .use(store) .use(router) app.mount('#app')</pre> <p>Contoh untuk Vue 2 mempunyai campuran dan dua komponen, tetapi bagaimana saya boleh menambahkannya pada sintaks Vue 3? Anda boleh menambah komponen dengan melakukan: <code>app.component('Thing', Thing)</code>, tetapi itu hanya satu komponen... patutkah saya menambahnya satu demi satu? Bagaimana pula dengan campuran? </p>
P粉340980243
P粉340980243

membalas semua(2)
P粉680000555

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.

P粉776412597

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的组件定义,然后添加自己的mixinscomponents:

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan