Vueの基礎知識としてケースの使い分けを理解するために備忘録として書いています。
そもそもケースとは？
簡単に言うと、**「ファイル名や関数名とかの書き方のルールみたいなもの」**と認識しておけばいいと思います。
それでは、パスカルケースとケバブケースについて見ていきましょう。
パスカルケース
単語の区切りを大文字で書く方法
先頭が大文字だと「アッパーキャメルケース」
先頭が小文字だと「ローワーキャメルケース」とも言われます。
※ Vueではコンポーネントに「ローワーキャメルケース」は使いません。
SampleCase
testCase
ケバブケース
単語を-で区切って書く方法
由来は-がケバブの串に見えるかららしいです。
sample-case
user-list
主な使い分け
下記のように利用すれば問題ないと思います。
- HTMLでは「ケバブケース」
- コンポーネントでは「パスカルケース」
実際に例をいくつか見てみましょう。
コンポーネント
基本的には「パスカルケース」を使いましょう。
.vue
<template>
<TestComponent></TestComponent>
</template>
＊注意＊
componentsに記述するときに、
「パスカルケース」で書けば「ケバブケース」でも問題ないが、
「ケバブケース」で書くと「ケバブケース」でしか動かない。
.vue
<template>
<TestComponent></TestComponent> <!-- OK -->
<test-component></test-component> <!-- OK -->
<TestComponent2></TestComponent2> <!-- NG(ケバブケースで指定しているから) -->
<test-component2></test-component2> <!-- OK -->
</template>
<script>
export default {
components: {
TestComponent,
'test-component2': TestComponent2,
}
}
</script>
props
Vueで親コンポーネントから子コンポーネントに値を渡すpropsですが、
**属性は「ケバブケース」その他は「キャメルケース」**で書きましょう。
.vue
<template>
<TestComponent :test-data="hoge"></TestComponent>
</template>
<script>
export default {
props: ['testData']
}
</script>
emit
emitではキャメルケースとケバブケースを勝手に変換してくれたりはしません。
**イベント名は常に「ケバブケース」**を使いましょう。