為什么VUE注冊組件命名時不能用大寫的?


這段時間一直在弄vue,當然也遇到很多問題,這里就來跟大家分享一些注冊自定義模板組件的心得

首先“VUE注冊組件命名時不能用大寫“其實這句話是不對的,但我們很多人開始都覺得是對的,因為大家都踩過大寫命名的坑

下面我們來看個例子:

<div id="app">
    <myTemplate></myTemplate>
</div>

<script>
    Vue.component('myTemplate',{
        template: '<h1>這里是自定義組件的內容</h1>'
    })
    new Vue({
        el: '#app'
    })
</script>

當我看完官網的文檔后,信心滿滿的第一次准備自定義組件時,就寫的跟上面差不多類型的代碼

但是當我運行代碼時,組件並沒有被渲染出來,反而報錯了說我用的組件沒有注冊,我當時真是擠破腦袋想了半天也沒發現問題出在哪里

這時候我在想難道我的命名和源碼里的沖突了?於是我把代碼改成這樣了↓

<div id="app">
    <mytemplate></mytemplate>
</div>

<script>
    Vue.component('mytemplate',{
        template: '<h1>這里是自定義組件的內容</h1>'
    })
    new Vue({
        el: '#app'
    })
</script>

然后運行代碼,ok完全正常,這時候大家都會認為vue注冊組件不能用大寫命名,我當時也這么認為的,直到這兩天在用餓了么elementUI框架,當我看了他們的源碼,發現原來並不是這樣

他們注冊組件的命名就和我第一次一樣myTemplate,標准的駝峰命名方法,那么我一開始為什么會報錯呢?這是為什么呢?難道VUE嫌棄我?

原來是我調用組件時的方法錯了,VUE是允許用大寫字母來注冊組件的,但當你使用時得在駝峰命名的大寫字母間加上”-“並都改為小寫,看下面代碼

<div id="app">
    <my-template></my-template>
</div>

<script>
    Vue.component('myTemplate',{
        template: '<h1>這里是自定義組件的內容</h1>'
    })
    new Vue({
        el: '#app'
    })
</script>

  代碼運行正常,這個時候大家是不是看出來,vue其實是可以用大寫字母命名注冊的

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

”My-template“這樣的會報錯

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

后來在官網看到這句話camelCase vs. kebab-case    HTML 特性是不區分大小寫的。所以,當使用的不是字符串模版,camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名: 如果你使用字符串模版,則沒有這些限制。

一切都水落石出了,哈哈


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM