使用させていただいたもの
Vue.js公式ドキュメント
Vue.jsについて|チームラボオンラインスキルアップ
【Vue.js】記法の違いまとめ|Qiita
コーポネントとは
公式ドキュメント(v2)によると、
コンポーネントは名前付きの再利用可能な Vue インスタンスです。
とのこと。
「1つの使い回しか効くパーツ」としてとりあえず解釈した。
簡単な例
See the Pen Vue.js coponent 1 by Katsuya Aoki (@aoook94) on CodePen.
const コーポネント名 = {}
でコーポネントを定義。
{}
内のtemplate:
は続くバッククオートの内側の文字列を、HTML上に出力できる。
親となるVueインスタンスからcomponets:{コーポネント名}
とすることで、コーポネントを利用できるようになる。
親インスタンスから呼び出すには、<my-component></my-component>
のように、コンポーネントの名前をHTMLタグにして記述する。
※この例のように、直接HTMLファイルにタグを記述する場合はパスカルケースからケバブケース(チェインケース)にしないと表示されない模様。
See the Pen Vue.js component 1-2 by Katsuya Aoki (@aoook94) on CodePen.
コンポーネントを親インスタンスのtemplate:
で呼び出す場合は、パスカルケースのままでも可能なようである。
また、コンポーネントの定義はケバブケースでもできるようだが、公式ドキュメント(v3)ではパスカルケースで定義しているため、これに倣う。
See the Pen Vue.js component1-3 by Katsuya Aoki (@aoook94) on CodePen.
コーポネントが再利用可能であるというように、
複数回呼び出された場合でも、それぞれが独自に機能する。
props プロパティ
ここまでは、コーポネントが持つ変数を親インスタンスから呼び出して出力しただけだったが、props
(プロパティ)を用いることで、親インスタンスから値をコーポネントへ渡すことができる。
props: []
で配列として、プロパティを定義する。
通常はプロパティの型(stringやintger)も設定するが、長くなりそうなので割愛。(別記事で投稿したい)
プロパティを用いることで、Vueインスタンスの値が
Vueインスタンス ⇒ そのままHTMLに出力
だったものが、
Vueインスタンス ⇒ プロパティで値が型に合うか判別 ⇒ HTMLに出力
となる。
See the Pen Vue.js props by Katsuya Aoki (@aoook94) on CodePen.
親インスタンスからコーポネントのプロパティへ、コーポネントののタグの属性として渡す。
ここでは、title
属性として文字列をコーポネントのプロパティへ、
親インスタンスの変数であるtext
は、:content
(v-bind:content
と同じ)でコーポネントののプロパティへ値を渡している。
$emit
コーポネント内で定義された変数は、その中でしか使用できないが、$emit
を用いることで、親インスタンスへ値を渡すことができる。
See the Pen Untitled by Katsuya Aoki (@aoook94) on CodePen.
(event
はHTML側のデフォルトのイベント。event.prevent.default()
でそれが実行されないようにできる。ここではform
タグのフォームが送信された際に実行される画面遷移。)
$emit(customSubmit, '変数名')
とし、親インスタンスからコーポネントを呼び出す際のコーポネントのタグ内に@customSubmit
(v-on:customSubmit
と同じ)とすることで、ひとつのイベントとして(@click
や@submit
などのように)扱うことができる。
ここでは、@customSubmit="onSubmit"
で、親インスタンスのメソッドを実行している。
あとがき
公式ドキュメントを読むようにしているのですが、
それだけでは理解できなかったことや疑問に思ったことを調べると、
先駆者様がわかりやすく記事にしてくださっており、
とても助かっています。
用語の使い方や言い回しがおかしいところがあれば優しく指摘していただけると助かります。