Vue3动态注册组件和Vue2动态注册组件的区别
今天再写一个小Demo的时候,碰到了一个有意思的问题,Vue2中动态注册组件的写法放在Vue3上竟然行不通,而且诡异的事情是单独在Ts文件里面导入Vue并进行注册还行不通,必须在入口函数进行注册
Vue2中的写法
components.forEach(key => {
Vue.component(key, () => import(`@/custom-component/${key}/Component`))
Vue.component(key + 'Attr', () => import(`@/custom-component/${key}/Attr`))
})
Vue3中的写法
components.forEach((item) => {
app.component( item, () => import(`@/custom-component/${item}/Component.vue`) );
app.component(
item + "Attr",
() => import(`@/custom-component/${item}/Attr.vue`)
);
});
是不是看上去跟没问题似的~,那么问题就来了。
在我调用组件的时候,页面加载进来不是我全局注册的组件报了undefined的警告
这就让我开始纳闷了,这是为什么呢?Vue3中路由懒加载的写法也这样,按道理应该也没错。
那么问题就在这,固化了思想,想当然了。
人家版本迭代更新了那么多好用的API,在一些该优化的地方怎么可能还顽固。
看了源码才知道。Vue2中里面那样定义在component这个API里面就调用了AsyncComponent这个API