Vue注冊(cè)組件命名時(shí)不能用大寫(xiě)的原因淺析

這段時(shí)間一直在弄vue，當(dāng)然也遇到很多問(wèn)題，這里就來(lái)跟大家分享一些注冊(cè)自定義模板組件的心得。

首先“VUE注冊(cè)組件命名時(shí)不能用大寫(xiě)“其實(shí)這句話(huà)是不對(duì)的，但我們很多人開(kāi)始都覺(jué)得是對(duì)的，因?yàn)榇蠹叶疾冗^(guò)大寫(xiě)命名的坑

下面我們來(lái)看個(gè)例子：

<div id="app">
  <myTemplate></myTemplate>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h2>這里是自定義組件的內(nèi)容</h2>'
  })
  new Vue({
    el: '#app'
  })
</script>

當(dāng)我看完官網(wǎng)的文檔后，信心滿(mǎn)滿(mǎn)的第一次準(zhǔn)備自定義組件時(shí)，就寫(xiě)的跟上面差不多類(lèi)型的代碼

但是當(dāng)我運(yùn)行代碼時(shí)，組件并沒(méi)有被渲染出來(lái)，反而報(bào)錯(cuò)了說(shuō)我用的組件沒(méi)有注冊(cè)，我當(dāng)時(shí)真是擠破腦袋想了半天也沒(méi)發(fā)現(xiàn)問(wèn)題出在哪里

這時(shí)候我在想難道我的命名和源碼里的沖突了？于是我把代碼改成這樣了↓

<div id="app">
  <mytemplate></mytemplate>
</div>
<script>
  Vue.component('mytemplate',{
    template: '<h2>這里是自定義組件的內(nèi)容</h2>'
  })
  new Vue({
    el: '#app'
  })
</script>

然后運(yùn)行代碼，ok完全正常，這時(shí)候大家都會(huì)認(rèn)為vue注冊(cè)組件不能用大寫(xiě)命名，我當(dāng)時(shí)也這么認(rèn)為的，直到這兩天在用餓了么elementUI框架，當(dāng)我看了他們的源碼，發(fā)現(xiàn)原來(lái)并不是這樣

他們注冊(cè)組件的命名就和我第一次一樣myTemplate，標(biāo)準(zhǔn)的駝峰命名方法，那么我一開(kāi)始為什么會(huì)報(bào)錯(cuò)呢？這是為什么呢？難道VUE嫌棄我？

原來(lái)是我調(diào)用組件時(shí)的方法錯(cuò)了，VUE是允許用大寫(xiě)字母來(lái)注冊(cè)組件的，但當(dāng)你使用時(shí)得在駝峰命名的大寫(xiě)字母間加上”-“并都改為小寫(xiě)，看下面代碼

<div id="app">
  <my-template></my-template>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h2>這里是自定義組件的內(nèi)容</h2>'
  })
  new Vue({
    el: '#app'
  })
</script>

　　代碼運(yùn)行正常，這個(gè)時(shí)候大家是不是看出來(lái)，vue其實(shí)是可以用大寫(xiě)字母命名注冊(cè)的

后面我也試了很多種命名方式，比如”my-template“這樣也是可以的

”My-template“這樣的會(huì)報(bào)錯(cuò)

----------------------------------------------------------------

后來(lái)在官網(wǎng)看到這句話(huà)camelCase vs. kebab-case    HTML 特性是不區(qū)分大小寫(xiě)的。所以，當(dāng)使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線隔開(kāi)式) 命名： 如果你使用字符串模版，則沒(méi)有這些限制。

總結(jié)

以上所述是小編給大家介紹的Vue注冊(cè)組件命名時(shí)不能用大寫(xiě)的原因淺析,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！