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