相信各位在学习和使用 Vue 进行开发的过程中,或多或少可能见到过或遇到过这样的报错:
在这里插入图片描述
问题出现的原因很简单:就是某个标签没有被成功导入。

问题的解决方案也很简单,网上一搜就会有很多解决方法,比如:

(1)第一步:先确保 Vue 项目里 components 、import 、组件标签 的写法没有问题,排除这样的因素:书写问题 (请一定要确保书写没问题,我看网上还有把 components 写在 data 里的,硬说自己写法没问题的)

(2)第二步:如果你不是 Vue 项目,而是直接在 HTML 里导入 vue.js ,然后去注册的 Vue。那么在排除写法没问题后,再检查使用顺序:顺序问题

(3)第三步:无论是 Vue 项目还是导入的 vue.js,现在确定标签的报错是来自于自定义的组件还是使用的第三方组件(插件)。比如你使用 ElementUI、Echarts 这种,如果第三方组件报错,那么显然是没有全局注册成功,或者没有在局部导入成功。在这里就具体情况具体分析,主要是参照官方文档和网上的导入方式,确保组件正确引入:比如 ElementUI 组件未导入ElementUI 组件未全局导入

(4)第四步:通常情况下,无论是从网上找资料,还是从平常的开发使用中,该问题通常可在前三步中解决。如果到了第四步就意味着,您确定了您的写法完全没有问题,而且使用的是自定义的组件。此时可以再试试以下方案,进行最后的尝试:

组件名不使用驼峰

自定义组件名称确保书写正确

如果依然没有解决,那么非常幸运,我也遇到了这样的问题,希望接下来的解决方法可以帮到您。


首先先看一下我的代码主要部分:

(1)我已经确保我的 import 、components 、组件标签 书写正确。
在这里插入图片描述
(2)而且我的组件使用和往常一样,正常使用。之前没报错,只是在使用 这个自定义组件 的时候就报错了(不使用驼峰、小写之类的和名称相关的方法,我在这里也试过了。当然在这里建议标签不使用驼峰,而使用 - 隔开)。
在这里插入图片描述
我已经检查了很多遍,这么乍一看,肯定不会报错吖,而且平常也都是这么用的,咋就使用这个组件的时候就报错了呢 ?

最后的最后,通过请教前辈以及对当前使用组件进行分析,我得出了以下结论。


问题解决

首先,我在使用这个组件的时候,虽然看起来没问题,但实际上和之前的用法有一丝差别。在导入组件的这个组件中有一个大前提:实际上我这个是 当前组件嵌套调用它自己 。简单来说就是,我 import 的组件实际上就是当前组件,我在这里想嵌套使用。也许有的大佬在上面就看出来了,问题出在 name 上。问题的解决方案就是:name 和 组件名保持一致。
在这里插入图片描述
我在这里并没有测试 name 不写是否可以。但通常情况下,您可以不用写 name。而我在这里书写 name 第一个原因是用来区分不同模块,就像 Vue 文档里写的一样。
在这里插入图片描述
第二个原因是我的前端项目需要页面缓存功能的,在这里需要填写 name 以实现功能。

更多 递归组件自我调用 用法。

问题解决。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐