问题描述:
在vue项目中为组件命名时使用了html标签为组件命名,这里组件命名不是组件的文件名,而是组件内通过name字段命名,比如我将组件的名字命名为“label”
浏览器控制台会报警告: Do not use built-in or reserved HTML elements as component id: label
问题原因:
为了保证组件能够被正常的解析编译,组件名字不要使用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语法,不常用,大家可查阅相关资料...