[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);