首页  >  问答  >  正文

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

<p>我尝试将语法从Vue 2转换为Vue 3,但我不确定如何包含<em>mixins</em>和<em>components</em>,如果你看到了这个Vue 2的代码:</p> <pre class="brush:php;toolbar:false;">import App from "./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 天前604

全部回复(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
  • 取消回复