溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這段時間一直在弄vue，當然也遇到很多問題，這里就來跟大家分享一些注冊自定義模板組件的心得。
首先“VUE注冊組件命名時不能用大寫“其實這句話是不對的，但我們很多人開始都覺得是對的，因為大家都踩過大寫命名的坑
下面我們來看個例子：
<div id="app">
<myTemplate></myTemplate>
</div>
<script>
Vue.component('myTemplate',{
template: '<h2>這里是自定義組件的內容</h2>'
})
new Vue({
el: '#app'
})
</script>
當我看完官網的文檔后，信心滿滿的第一次準備自定義組件時，就寫的跟上面差不多類型的代碼
但是當我運行代碼時，組件并沒有被渲染出來，反而報錯了說我用的組件沒有注冊，我當時真是擠破腦袋想了半天也沒發現問題出在哪里
這時候我在想難道我的命名和源碼里的沖突了？于是我把代碼改成這樣了↓
<div id="app">
<mytemplate></mytemplate>
</div>
<script>
Vue.component('mytemplate',{
template: '<h2>這里是自定義組件的內容</h2>'
})
new Vue({
el: '#app'
})
</script>
然后運行代碼，ok完全正常，這時候大家都會認為vue注冊組件不能用大寫命名，我當時也這么認為的，直到這兩天在用餓了么elementUI框架，當我看了他們的源碼，發現原來并不是這樣
他們注冊組件的命名就和我第一次一樣myTemplate，標準的駝峰命名方法，那么我一開始為什么會報錯呢？這是為什么呢？難道VUE嫌棄我？
原來是我調用組件時的方法錯了，VUE是允許用大寫字母來注冊組件的，但當你使用時得在駝峰命名的大寫字母間加上”-“并都改為小寫，看下面代碼
<div id="app">
<my-template></my-template>
</div>
<script>
Vue.component('myTemplate',{
template: '<h2>這里是自定義組件的內容</h2>'
})
new Vue({
el: '#app'
})
</script>
代碼運行正常，這個時候大家是不是看出來，vue其實是可以用大寫字母命名注冊的
后面我也試了很多種命名方式，比如”my-template“這樣也是可以的
”My-template“這樣的會報錯
----------------------------------------------------------------
后來在官網看到這句話camelCase vs. kebab-case HTML 特性是不區分大小寫的。所以，當使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名： 如果你使用字符串模版，則沒有這些限制。
總結
以上所述是小編給大家介紹的Vue注冊組件命名時不能用大寫的原因淺析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
