vue 元件（component）命名的小細節問題（大小寫問題）

Je pense a toii發表於2020-11-24
Vue元件

vue 元件命名的小細節問題（大小寫問題）

今天學習元件的時候，突然發現，定義的名為”Mycom"的元件在使用的時候用“mycom”使用沒有任何問題，於是我就試了一下哪種情況可以，哪種情況不可以。
首先說明一下，我註冊的是全域性元件。

1.簡單測試結果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 元件自定義屬性</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <child message="helloppp!"></child>
    
    <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:message="parentMsg"></child>
    </div>

    <ol>
      <a>aaaaa</a>
        <My_com v-for="item in sites" v-bind:todo="item"></My_com>
    </ol>
</div>

<script>
// 註冊
Vue.component('child', {
  // 宣告 props
  props: ['message'],
  // 同樣也可以在 vm 例項中像 “this.message” 這樣使用
  template: '<span>{{ message }}</span>'
})
Vue.component('My_com', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
// 建立根例項
new Vue({
  el: '#app',
  data: {
    parentMsg: '父元件內容',
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>
註冊元件名使用名結果
MycomMycom正確
Mycommycom正確
MycomMyCom正確
MycommyCom正確
MycomMYCom正確
註冊元件名使用名結果
mycommycom正確
mycomMycom正確
mycomMyCom正確
mycommyCom正確
mycomMYCom正確
mycommYCom正確
註冊元件名使用名結果
MyComMyCom錯誤
MyComMycom錯誤
MyCommycom錯誤
MyCommyCom錯誤
註冊元件名使用名結果
MyComMy-Com正確
MyComMy-com正確
MyCommy-com正確
MyCommy-Com正確
註冊元件名使用名結果
My_ComMy_Com錯誤
My_Commy_Com錯誤
My_Commy_com錯誤
My_ComMy_com錯誤
My_Commy_-com正確
My_ComMy_-Com正確
註冊元件名使用名結果
My_commy_com正確
My_commy_Com正確
My_comMy_Com正確
My_comMy_com正確
註冊元件名使用名結果
my_commy_com正確
my_commy_Com正確
my_comMy_Com正確
my_comMy_com正確

測試結果如上發現只要你前面註冊的時候滿足了命名規則，那麼在使用的時候就是不區分大小寫的。如果不符合命名規則，那麼怎麼使用都是錯誤的

2.使用規則

首先根據上面我們測試的結果，以及查詢資料可知，註冊的時候，首字母可以大小寫，後面的字母也可以大小寫，但是使用的時候大寫字母前面需要用-隔開，並且使用的時候完全不區分大小寫，只要注意大寫字母前加-即可。例如：註冊“MyAppEds”，使用“My-App-Eds”。**注意：元件閉合標籤比較隨意，元件的閉合標籤是不需要加-符號，也不用區分大小寫就可以被識別的。**也就是說你像下面這麼使用是完全沒有問題的。

//使用元件
<my-co-me v-for="item in sites" v-bind:todo="item"></mYCo-me>
//註冊元件
Vue.component('MyCoMe', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

3.總結

元件註冊可以任意取名字，只要使用的時候將大寫字母前加 - 即可（首字母大寫除外）。

相關文章