Vue 3 - 如何在根組件中使用組件和混入?
P粉340980243
2023-08-24 16:25:32
<p>我嘗試將語法從Vue 2轉換為Vue 3,但我不確定如何包含<em>mixins</em>和<em>components</em>,如果你看到了這個Vue 2的代碼:</p>
<pre class="brush:php;toolbar:false;">import App 從 "./App.vue";
const app = new Vue({
mixins: [globalMixin],
router,
el: '#app',
store,
components: {
Thing,
Hello
},
render: h => h(App)
});</pre>
<p>這是Vue 3的語法,如果我理解正確的話:</p>
<pre class="brush:php;toolbar:false;">const app = createApp(App)
app
.use(store)
.use(router)
app.mount('#app')</pre>
<p>Vue 2的範例中有一個mixin和兩個元件,但我要如何將它們加入Vue 3的語法呢?
你可以透過這樣做來添加一個元件:<code>app.component('Thing', Thing)</code>,但那隻是一個元件...我應該一個一個地添加它們嗎?那混入呢? </p>
在Vue 3中,你可以使用應用程式API mixin方法。
對於元件,你可以逐一添加它們。我更喜歡這種方式,因為它更清晰。
在Vue 3中,可以在根元件中進行本機元件註冊和混入(在嘗試避免污染全域命名空間時非常有用)。使用
extends
選項來擴充App.vue
的元件定義,然後新增自己的mixins
和components
選項:逐一註冊元件似乎是一個好方法,特別是如果只有幾個元件。
示範