typescript注册组件-Vue3动态注册组件和Vue2动态注册组件的区别

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

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`)
  );
});

是不是看起来没有什么问题呢？ 那么问题就出现了。

当我调用该组件时，页面会加载一个不是我的全局注册的组件typescript注册组件，并报告未定义的警告。

这让我很郁闷，这是为什么呢？ Vue3 West Router 中写延迟加载的方式是一样的，逻辑上应该是正确的。

这就是问题。 它固化了思想，有偏见。

这个版本迭代更新了这么多好用的APItypescript注册组件，怎么在一些应该优化的地方还顽固不化呢？

看完源码你就知道了。 在 Vue2 中，AsyncComponent API 是在上面定义的组件 API 上调用的。