vue中使用element报错:Unknown custom element: [el-drawer] - did you register the component correctly?
最新推荐文章于 2023-01-09 23:01:24 发布
小太阳...
于 2020-04-16 09:30:43 发布
10269
vue中使用element报错:Unknown custom element: [el-drawer] - did you register the component correctly?
在vue项目中,使用element-ui抽屉组件的时候报了下面这个错误但是前面使用的表格,表单,输入框一切正常,当引入drawer的时候就报错了。应该是vue或者elementUI版本过低的问题。解决:找到了package.json文件,发现里面的element的版本过低。然后需要升级element-ui版本解决 :npm 安装指定版本的element-ui比如:npm i eleme...
npm install
vue
-
custom
-
element
--save
import
vue
Custom
Element
from '
vue
-
custom
-
element
'
Vue
. use (
vue
Custom
Element
) ;
要
使用
vue
-cli构建Web组件,必须
使用
以下命令:
vue
-cli-service build --target lib --name your-
component
-name src/main.js
注意:命令
vue
-cli-service build --ta
引用
element
-ui的
Drawer
抽屉组件
报错
问题
**前提:**
vue
项目采取按需引入的方式引入
element
,并且
使用
其他组件都正常,没有发生异常
问题表现:
在
vue
项目
中
引用了
Drawer
抽屉组件,结果
报错
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdWjwtt9-1628652959203)
意思就是组件未注册,当时我的表情:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INeMeOti-1628652959205)
报错
信息
vue
.runtime.esm.js:619 [
Vue
warn]:
Unknown
custom
element
: <FormError> - did you re
gis
ter
the
component
cor
rect
ly
? For recursive
component
s, make sure to provide the “name” option.
出现这种问题的原因我目前只遇到一种,那就是
vue
的组件
使用
错误,具体原因包括以下几种:
import语句导入组件时fr
报错
|
Unknown
custom
element
: <
el
-form> - did you re
gis
ter
the
component
cor
rect
ly
?
在项目开发过程
中
,我们经常
使用
el
-
drawer
和
el
-dialog进行初始化问题,
在最近的项目
中
,有好几个朋友总是问我:你看我在created或者mounted
中
已经写了组件的初始化工作,为什么就不对呢?
现在我们就来说下这两个组件
使用
的场景:
点击按钮,将id传递给子组件,触发
el
-
drawer
和
el
-dialog弹出,远程请求数据,渲染页面。
1 分析场景:
点击按钮,获取id
id 绑定子组件
子组件获取id,并通过id 请求远程数据
获取数据后渲染子组件
2 实际业务难点
记录:
Unknown
custom
element
: [v-table] - did you re
gis
ter
the
component
cor
rect
ly
...
报错
【亲测有效】
出现
Unknown
custom
element
: <> - did you re
gis
ter
the
component
cor
rect
ly
? For recursive compon 检查以下几处
第一种: 看
component
s:{},单词是否拼错,和不要写成
component
s(){}
第二种:本页面
component
s 看写了几个, 是否是因为覆盖了。只能有一个
component
s:{}
第三种,检查引入的组件 确定是否需要{} , import XXX from "...." 还是 imp.
把
component
s写成了
component
import xxx from “./xxx.
vue
” 写成了import { xxx} from “./xxx.
vue
”
代码
中
有两个
component
s,后一个的值把前一个覆盖了
逐一对照上述3种可能导致出错原因,然后做对应修改即可解决问题
我是第3个原因,被坑到差点怀疑人生,看到这篇文章的小伙伴你是什么原因?
尝试了一下前后端分离的开发模式,然后自己试着用
Vue
写了两个页面,调试看效果的时候一直
报错
unknown
custom
element
,凡是用到
element
-ui的元素都不能被识别。
报错
详情千篇一律都长下面这样:
问题原因在于我对
Vue
这东西不理解,以为在new
vue
的时候把
Element
UI传进去就可以了(不是很懂new
Vue
()这里传进去的参数是干啥的),也就是这样子:
正确的做法是要单独申明
使用
element
-ui,也就是要加上
Vue
.use(
Element
UI),如下所示:
只简单记录
最近在用
element
-ui做一个
vue
的小项目,做的过程遇到了这样的错误:
[
Vue
warn]:
Unknown
custom
element
: - did you re
gis
ter
the
component
cor
rect
ly
? For recursive
component
s, make sure to provide the “name” option.
错误原因:没有成功引入
element
-ui
解决办法:在main.js
中
引入如下代码
import
Element
UI from
[
Vue
warn]:
Unknown
custom
element
: <a-xxxx> - did you re
gis
ter
the
component
cor
rect
ly
?
For recursive
component
s, make sure to provide the “name” option.
vue中使用element报错:Unknown custom element: [el-drawer] - did you register the component correctly?
潇湘诺隐:
ElementUi使用el-autocomplete实现搜索建议(无数据匹配+点击clearable清除,不触发下拉选项)
yy的share:
ElementUi使用el-autocomplete实现搜索建议(无数据匹配+点击clearable清除,不触发下拉选项)
weixin_45393316:
ElementUi使用el-autocomplete实现搜索建议(无数据匹配+点击clearable清除,不触发下拉选项)
yy的share: