【bug记录2】在vue中引入vant库组件，报错Failed to resolve component:...make sure to exclude it from component...

一、问题场景

如果项目对vant进行了全局注册，即app.use(vant)，则无需一个页面地在components里面注册！！！

（之所以不全局注册是为了减少打包体积）

我在vue3中局部引入vant库组件 grid，已经完成了import，并注册了组件，如下：

import {Grid} from 'vant';

export default defineComponent({

        ....

        components:{ Grid  },

})

但是出现报错，虽然是warning，但是导致组件根本无法显示！具体错误信息如下

[Vue warn]: Failed to resolve component: van-grid-item If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

二、问题原因

这和vant库组件的定义有关。

虽然我们引入的时候，是以 Grid 名称导入，

但是实际我们在vue页面中使用组件时是用 <van-grid> </van-grid>

组件名称和导入类名并不一致！

三、问题解决

这个解决方法可以类推到导入vant库的任何组件。

即使用动态属性值，按照实际名称注册组件！如下：

//注册组件 (!代表的是一定不为null/undefined）
components:{
   [Grid.name!]:Grid
}