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 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>
在Vue 3中,你可以使用应用程序API mixin方法。
对于组件,你可以逐个添加它们。我更喜欢这种方式,因为它更清晰。
在Vue 3中,可以在根组件中进行本地组件注册和混入(在尝试避免污染全局命名空间时非常有用)。使用
extends
选项来扩展App.vue
的组件定义,然后添加自己的mixins
和components
选项:逐个注册组件似乎是一个好方法,特别是如果只有几个组件。
演示