vue控制台警告:Do not use built-in or reserved HTML elements as component id: label

127 阅读1分钟

问题描述:

在vue项目中为组件命名时使用了html标签为组件命名,这里组件命名不是组件的文件名,而是组件内通过name字段命名,比如我将组件的名字命名为“label”

image.png

浏览器控制台会报警告: Do not use built-in or reserved HTML elements as component id: label

image.png

问题原因:

为了保证组件能够被正常的解析编译,组件名字不要使用html标签或者html保留关键字,避免出现解析混乱。

解决:

组件重新命名,将组件的名字由“label”改为“labelIndex”

<script setup name="labelIndex" lang="ts">

这里是vue3项目,vue3项目为组件命名,有多种方式

1、setup语法,直接在script标签使用name字段命名,script标签支持name命名需要安装插件支持,我使用的是: unplugin-vue-setup-extend-plus

2、setup语法,通过defineOptions命名,无需插件,Vue3.3版本后原生支持:

<script setup lang="ts">
defineOptions({
  name: 'labelIndex'
});
</script>

3、非setup语法,不常用,大家可查阅相关资料...