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

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

这个报错是 Vue 警告不要使用内置的或者保留的 HTML 元素作为组件的 id。在 Vue 中，组件的 id 应该是唯一的，并且不应该与 HTML 元素的标签名相同。

比如说，如果有一个组件定义如下：

<template>
  <div id="div">This is my component</div>
</template>

<script>
  export default {
    name: "MyComponent",
  };
</script>

在这个例子中，组件的 id 被设置为"div"，这样做会引发 Vue 的警告，因为"div"是 HTML 的内置元素。应该避免使用类似于"div"、"span"、"p"等标签名作为组件的 id。

解决这个问题的方法是，确保给组件的 id 命名为不与 HTML 标签名冲突的唯一名称。例如：

<template>
  <div id="my-component">This is my component</div>
</template>

<script>
  export default {
    name: "MyComponent",
  };
</script>

在这个例子中，我将组件的 id 改为了"my-component"，这样就不会与 HTML 中的标签名冲突了。

以下为 Vue 2.0 中 HTML 标签和 Vue 保留标签的范围

// 区分大小写
var isHTMLTag = makeMap(
  "html,body,base,head,link,meta,style,title," +
    "address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section," +
    "div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul," +
    "a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby," +
    "s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video," +
    "embed,object,param,source,canvas,script,noscript,del,ins," +
    "caption,col,colgroup,table,thead,tbody,td,th,tr," +
    "button,datalist,fieldset,form,input,label,legend,meter,optgroup,option," +
    "output,progress,select,textarea," +
    "details,dialog,menu,menuitem,summary," +
    "content,element,shadow,template"
);
// 不区分大小写
var isSVG = makeMap(
  "svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font," +
    "font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern," +
    "polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",
  true
);
var isReservedTag = function (tag) {
  return isHTMLTag(tag) || isSVG(tag);
};
// 区分大小写
var isBuiltInTag = makeMap("slot,component", true);