最近看到vue官方文檔的時(shí)候饭尝，多次提及字符串模板和dom模板踪危，對(duì)這個(gè)概念比較模糊榜配，經(jīng)查閱后記錄供日后參考逗栽。
1.字符串模板
字符串模板就是寫(xiě)在vue中的template中定義的模板祠汇，如.vue的單文件組件模板和定義組件時(shí)template屬性值的模板仍秤。字符串模板不會(huì)在頁(yè)面初始化參與頁(yè)面的渲染，會(huì)被vue進(jìn)行解析編譯之后再被瀏覽器渲染可很，所以不受限于html結(jié)構(gòu)和標(biāo)簽的命名诗力。
Vue.component('MyComponentA', {
template: '<div MyId="123"><MyComponentB>hello, world</MyComponentB></div>'
})
<div id="app">
<MyComponentA></MyComponentA>
</div>
2.dom模板(或者稱為Html模板)
dom模板就是寫(xiě)在html文件中，一打開(kāi)就會(huì)被瀏覽器進(jìn)行解析渲染的我抠，所以要遵循h(huán)tml結(jié)構(gòu)和標(biāo)簽的命名苇本，否則瀏覽器不解析也就不能獲取內(nèi)容了导坟。
下面的例子不會(huì)被正確渲染, 會(huì)被解析成mycomponent,但是注冊(cè)的vue的組件是MyComponent，因此無(wú)法渲染圈澈。
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
Hello Vue
<MyComponent></MyComponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script >
//全局注冊(cè)
Vue.component('MyComponent', {
template: '<div>組件類容</div>'
});
new Vue ({
el: '#app'
});
</script>
</body>
</html>
所以惫周，下面的例子就可以正常顯示了：
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
Hello Vue
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script >
//全局注冊(cè)
Vue.component('my-component', {
template: '<div>組件類容</div>'
});
new Vue ({
el: '#app'
});
</script>
</body>
</html>
因?yàn)閔tml對(duì)大小寫(xiě)不敏感，所以在DOM模板中使用組件必須使用kebab-case命名法(短橫線命名)康栈。
因此,對(duì)于組件名稱的命名递递，可參考如下實(shí)現(xiàn)：
/*-- 在單文件組件、JSX和字符串模板中 --*/
<MyComponent/>
/*-- 在 DOM 模板中 --*/
<my-component></my-component>
或者
/*-- 在所有地方 --*/
<my-component></my-component>
