首頁  >  問答  >  主體

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

<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>
P粉340980243P粉340980243445 天前606

全部回覆(2)我來回復

  • P粉680000555

    P粉6800005552023-08-25 13:31:15

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

    對於元件,你可以逐一添加它們。我更喜歡這種方式,因為它更清晰。

    回覆
    0
  • P粉776412597

    P粉7764125972023-08-25 13:14:46

    在Vue 3中,可以在根元件中進行本機元件註冊和混入(在嘗試避免污染全域命名空間時非常有用)。使用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')
    

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

    示範

    回覆
    0
  • 取消回覆