bug：[Vue warn]: Do not use built-in or reserved HTML elements as component id: Component

于 2024-04-17 13:54:41 发布
阅读量377 收藏 1
点赞数 4
分类专栏： bug 文章标签： bug vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45796592/article/details/137642963
版权

  • 今天说一个入门比较容易踩的一个坑，刚好让我遇到了——Do not use built-in or reserved HTML elements as component id: Component，翻译一下大致意思是：不要使用内置或保留的HTML元素作为组件名

  • 很明显昂，定义组件时用到了内置的元素；我们定义一个新的组件时都会写组件名是什么，方便描述/阅读，特别是vue2的路由组件还有方法是通过自定义的组件名从而全局定义组件的
  • 通过源代码我们可以看到原来定义组件名时使用了Component(内置是有component的)从而导致的报错

  • 解决方案：修改name的值即可（最好与我们文件名一样，方便后续代码阅读与使用）

❆VE❆
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 报错 ：[Vue warn]: Do not use built-in or reserved HTML elements as comp
且听风吟的博客
11-26 5279
引入组件后出现了如下报错： 是因为组件的命名和html标签重复导致警告，如下： 解决方案是给 name 换个名字就可以啦，如下： 所以，创建组件的时候要注意组件命名与html标签区分开。 由于模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。 主要有三种情况： 一是完全不合法的标签名，例如 </> ； 二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常
vue-flatpickr-component：Flatpickr日期时间选择器的Vue.js组件
02-06
Vue FlatPickr组件 Vue.js组件，用于日期时间选择器。或版本矩阵Vue.js版本套餐版本科2.x 8.x ...true ，组件将负责所有操作与验证库一起使用安装# yarnyarn add vue-flatpickr-component# npmnpm install vue-flatpick
[Vue warn]: Do not use built-in or reserved HTML elements as component id:
dexing07的博客
11-05 1万+
vue.runtime.esm.js:472 [Vue warn]: Do not use built-in or reserved HTML elements as component id: main在引用vuejs 组件的时候出现了这错误，这个句话翻译下来就是： 不能使用内置或者保留的HTML或者组件作为组件id意思就是你使用的组件名的名称跟系统（vue）的内置属性名冲突了，所以创
vue报错：Do not use built-in or reserved HTML elements as component id: table
weixin_37746257的博客
04-08 2882
原因：组件，不能和html标签重复 由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况： 　　　　一是完全不合法的标签名，例如 </>； 　　　　二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常； 　　　　三是与 Vu...
[Vue warn]: Do not use built-in or reserved HTML elements as component id: details
wind_linjie的博客
03-18 3064
报错信息 不要使用内置或保留的HTML元素作为组件id:details 由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况： 1、标签名需要是完全不合法的标签名，例如 </>； 2、是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome上正常但在 IE 上不正...
Do not use built-in or reserved HTML elements as component id等等vue warn问题
热门推荐
草巾冒小子的博客
05-21 2万+
vue开发项目过程中，会出现类似于：Do not use built-in or reserved HTML elements as component id ······的报错，why? 报错截图示下： 是因为在本地项目对应的文件中，出现了不应该有的命名方式： 如下： 采用正确命名，修改上述代码，即可消除报错。...
解决vue 引入子组件报错的问题
12-03
Do not use built-in or reserved HTML elements as component id: header 源码： [removed] import header from "./components/header" import aside from "./components/aside" import footer from "./components...
generator-vue-component-developer:vue组件开发模板
05-13
> A component develop project boilerplate to enable your quick develop your component or directive and publish to npm 项目结构 |-- demo # demo project |-- App.vue # demo project vue entry |-- ...
vue-component-devtool:Vue 组件开发模板
05-14
usegit clone https://github.com/mengdu/vue-component-devtool my-component安装依赖yarn# ornpm install功能打包vue组件，导出 umd 模式支持 markdown 解析markdwon 可以编写编写vue例子目录：├─build 开发工具...
vue-slider-component：:thermometer:高度定制的滑块组件
02-06
$ yarn add vue-slider-component@next # npm install vue-slider-component@next --save 警告 更改data以v-data现在由于类型的冲突。 （可能是临时修改） :sparkles: 产品特点 :meat_on_bone: 更可定制 :dress: ...
[Vue warn]: Do not use built-in or reserved HTML elements as component id:XXX 问题记录
wu_yans的博客
07-17 1095
今天新创建了一个vue项目进行学习，完了，刚刚需要写一个导航栏组件，就用ElementUI写了一个，打算注册到首页，结果呢，给我报错了： 仔细看了一下报错警告解释： 不要将内置或保留的HTML元素用作component id:menu 意思简单点呢，就是我们的命名不规范或者错误 由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况： 1.是完全不合法的标签名，例如 </>； 2.是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件
vue name命名错误 Do not use built-in or reserved HTML elements as component
最新发布
god_sword_的博客
08-05 3445
在项目中我使用的是header 作为组件名称，但是在前端html中这个是内置组件来的，名称已被占用不能再使用这些名称了。这里指的是components的名称命名不正确。若引用改了还是报错啦，可以查看下vue页面的。把命名修改一下，避免名称冲突就好了。是不是也名称冲突了。
浏览器控制报告：[Vue warn]: Do not use built-in or reserved HTML elements as component id: text
qq_41769719的博客
04-14 1539
这个这个错误不影响页面正常渲染，但会导致浏览器控制台不干净。 报错： [Vue warn]: Do not use built-in or reserved HTML elements as component id: text 一、原因 vue使用组件的时候 浏览器的控制台一直报告该错误；该错误主要是由于vue的组件name与html元素冲突导致。只要用到这个组件都会报错 二、解决方法 将该方法重新命名，改为特定含义的name名称。就可以成功解决了。 例如: ...
报错 | Do not use built-in or reserved HTML elements as component id: data
A123ppleQueen的博客
03-24 406
vue.js:597 [Vue warn]: Do not use built-in or reserved HTML elements as component id: data warn @ vue.js:597 validateComponentName @ vue.js:1350 checkComponents @ vue.js:1337 mergeOptions @ vue.js:1457 Vue._init @ vue.js:4598 Vue @ vue.js:4716 (anonymous)
vue 出现：Do not use built-in or reserved HTML elements as component id: footer问题
且听风吟的博客
07-05 3636
vue引入自定义组件错误 初学vue阶段，学习container布局时，想自定义Footer组件，引入App.vue之后发生了错误，浏览器报错： 浏览器的[vue warn]错误，一般都是组件渲染出现了问题。 bug修改前源码： 查找资料，发现了原因：vue里面不允许使用 Html已有的标签作为自定义标签 因为模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有...
Do not use built-in or reserved HTML elements as component id
weixin_45280871的博客
04-27 809
报错信息：Do not use built-in or reserved HTML elements as component id:address 这是我最开始报错时引入组件的代码 <script> import address from "./components/address"; export default { components: { address } ...
Do not use built-in or reserved HTML elements as component id: header
rj2017211811的博客
02-09 1484
错误:定义了一个header组件但是无法被其他组件引用 原因:因为header为h5的标签，vue中规定：组件的名称不能和h5的标签名称相同 关于vue的书写规范参考vue官网:https://cn.vuejs.org/v2/style-guide/ ...
vue.esm.js:5105 [Vue warn]: Do not use built-in or reserved HTML elements as component id: data
06-08
好的，你的问题是关于Vue.js中的一个警告。这个警告意味着你在Vue组件中使用了一个已有的或保留的HTML元素作为组件的ID，这可能会导致一些问题。Vue.js不建议使用这些元素作为组件ID，因为它们具有特殊的用途，可能会导致意外的行为。如果你需要给组件一个唯一的ID，可以使用自定义前缀来避免和HTML元素冲突，比如"my-component-1"。这样可以保证你的组件ID唯一且不会和HTML元素冲突。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值