Edited at

Vue.js命名規則、命名のコツ

More than 1 year has passed since last update.

Vue.js コンポーネント スタイル ガイド

こちらがベースになっているのでまずはこれを熟読すべし!

以下、引用になっているのはこのサイトからの出典です。


2017/12/14 追記

公式ガイドがもうすぐBetaが外れるのでこちらを見たほうが良いです。


コンポーネント名


意味のある名前で: 具体的過ぎず、抽象的過ぎず。

短く: 2または3語。

発音可能: それらについて話せるようにしたい。


例)


  • Card: 短すぎます。抽象的すぎます。

  • UserProfilePostErrorModal: 長すぎます。具体的すぎます。

  • UserList: Good


ファイル名

PascalCaseにします。


  • user_list.vue: PascalCaseになっていません。

  • UserList.vue: Good


name属性

name属性は必ず与えましょう。

name属性は.vueファイルでない場合は必ず与えましょう。

.vueファイルの場合は自動でファイル名がname属性になるため不要です。

PascalCaseにします。

// name属性がありません。

export default {
data: function() {
return {
foo: "bar"
}
}
}

// Good
export default {
name: 'UserList'
}


html

kebab-caseにします。

<template lang="html">

<user-list></user-list>
</template>

<script type="text/javascript">
export default {
name: "Hoge",
components: {
'user-list': UserList
}
}
</script>

コンポーネントの登録の部分はES2015では以下のように省略して書くこともできます(Thank you @kimama1997)。

export default {

name: "Hoge",
components: {
UserList
}
}

{ ComponentA }{ ComponentA: ComponentA }の簡略形です。

そしてVueは自動でキーをcomponent-aに変換してくれます。

参考: https://vue-loader.vuejs.org/ja/features/es2015.html


メソッド名

当然camelCaseにします。

処理の内容を明確に表す名前にすること。

よくある間違いは@clickで発火するメソッドにclickButton等とつけてしまうことです。

ちゃんと処理の内容(クリックすると何が起きるのか)を表すようにしましょう。

<!-- 何が起きるのかを表していません -->

<button @click="clickSubmit">Submit</button>

<!-- Good -->
<button @click="postData">Submit</button>


イベント名


イベント名前はケバブケースにするべきです。

イベント名は末尾が不定形の動詞(例 client-api-load)、または名詞(例 drive-upload-success)で終わるべきです。


よくある間違いは@clickで発火したタイミングで通知するイベントに対してupdate-user-list等と実行する内容をつけてしまうことです。

何が起きたのかを表す名前をつけましょう。

メソッド名をつけるときとは逆の考え方なので要注意です。

this.$emit('updateButtonClick') // kebab-caseになっていません。

this.$emit('click-on-update-button') // 末尾が不定形の動詞で終わっていません。
this.$emit('update-button-click') // Good

ちなみに vue.js 2.3 から使える .sync 修飾子を使う場合は少々ややこしいですが、以下のようにkebab-caseとcamelCaseを使い分けるので要注意です。

<comp :my-foo.sync="bar"></comp>

this.$emit('update:myFoo', newValue)

See the Pen vue.js sync test by isuke (@isuke) on CodePen.