Contents

Vue 組件命名學

Vue component name-casing

2020-10-13 392 words One minute

Contents

命名的方式

my-first-component kebab-case (串燒)
myFirstComponent camelCase (駝鋒)
MyFirstComponent PascalCase (pascal 是一門程式語言)

宣告組件的命名沒有限制

可以使用三種命名的任一種

1
2
3
4
5


Vue.component('my-first-component', { /* ... */ })
// or
Vue.component('myFirstComponent', { /* ... */ })
// or
Vue.component('MyFirstComponent', { /* ... */ })

模版的命名

用 HTML 作為 View 的模版

只能用 kebab-case
不能 self closing (一定要加上 closing tag </my-first-component>)

1

<my-first-component></my-first-component>

用 template 作為模版

不管宣告時的命名方式，皆可以用 kebab-case
也可以用 camelCase 或 PascalCase，但須與宣告的命名方式相同 (如：都是camelCase)
可以 self closing

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


Vue.component('my-first-component', { /* ... */ })
// or
Vue.component('myFirstComponent', { /* ... */ })
// or
Vue.component('MyFirstComponent', { /* ... */ })
new Vue({
    el: '#app',
    template: `
        <div>
            <my-first-component/>
        </div>
    `,
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Vue.component('myFirstComponent', { /* ... */ })

new Vue({
    el: '#app',
    template: `
        <div>
            <myFirstComponent/>
        </div>
    `,
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Vue.component('MyFirstComponent', { /* ... */ })

new Vue({
    el: '#app',
    template: `
        <div>
            <MyFirstComponent/>
        </div>
    `,
})

結論

均使用 kebab-case 準沒錯
template模版可以 self closing，HTML模版不行
宣告組件的命名沒有限制
HTML模版必用 kebab-case，template 模版可以使用同宣告組件的命名方式

參考資料