Vue.js コンポーネント メモ

## 使用させていただいたもの
[Vue.js公式ドキュメント](https://v3.ja.vuejs.org/)
[Vue.jsについて|チームラボオンラインスキルアップ](https://team-lab.github.io/skillup-nodejs/vuejs.html#vue-js%E3%81%A8%E3%81%AF%EF%BC%9F)
[【Vue.js】記法の違いまとめ|Qiita](https://qiita.com/aiandrox/items/788c1846ef17094264a2)

## コーポネントとは

公式ドキュメント（v2）によると、
`コンポーネントは名前付きの再利用可能な Vue インスタンスです。`とのこと。

「１つの使い回しか効くパーツ」としてとりあえず解釈した。

### 簡単な例
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWaQVgw" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/QWaQVgw">
  Vue.js coponent 1</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`const コーポネント名 = {}`でコーポネントを定義。
`{}`内の`template:`は続くバッククオートの内側の文字列を、HTML上に出力できる。

親となるVueインスタンスから`componets:{コーポネント名}`とすることで、コーポネントを利用できるようになる。

親インスタンスから呼び出すには、`<my-component></my-component>`のように、コンポーネントの名前をHTMLタグにして記述する。
※この例のように、直接HTMLファイルにタグを記述する場合はパスカルケースからケバブケース（チェインケース）にしないと表示されない模様。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWXyJRM" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/NWXyJRM">
  Vue.js component 1-2</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

コンポーネントを親インスタンスの`template:`で呼び出す場合は、パスカルケースのままでも可能なようである。
また、コンポーネントの定義はケバブケースでもできるようだが、公式ドキュメント（v3）ではパスカルケースで定義しているため、これに倣う。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWXYvEP" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/NWXYvEP">
  Vue.js component1-3</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

コーポネントが再利用可能であるというように、
複数回呼び出された場合でも、それぞれが独自に機能する。

## props プロパティ

ここまでは、コーポネントが持つ変数を親インスタンスから呼び出して出力しただけだったが、`props`（プロパティ）を用いることで、親インスタンスから値をコーポネントへ渡すことができる。
`props: []`で配列として、プロパティを定義する。
通常はプロパティの型（stringやintger）も設定するが、長くなりそうなので割愛。（別記事で投稿したい）

プロパティを用いることで、Vueインスタンスの値が
Vueインスタンス　⇒　そのままHTMLに出力
だったものが、
Vueインスタンス　⇒　プロパティで値が型に合うか判別　⇒　HTMLに出力
となる。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJzZVXL" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/OJzZVXL">
  Vue.js props</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

親インスタンスからコーポネントのプロパティへ、コーポネントののタグの属性として渡す。
ここでは、`title`属性として文字列をコーポネントのプロパティへ、
親インスタンスの変数である`text`は、`:content`（`v-bind:content`と同じ）でコーポネントののプロパティへ値を渡している。

## $emit
コーポネント内で定義された変数は、その中でしか使用できないが、`$emit`を用いることで、親インスタンスへ値を渡すことができる。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNpdNyx" data-user="aoook94" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/aoook94/pen/oNpdNyx">
  Untitled</a> by Katsuya Aoki (<a href="https://codepen.io/aoook94">@aoook94</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

（`event`はHTML側のデフォルトのイベント。`event.prevent.default()`でそれが実行されないようにできる。ここでは`form`タグのフォームが送信された際に実行される画面遷移。）

`$emit(customSubmit, '変数名')`とし、親インスタンスからコーポネントを呼び出す際のコーポネントのタグ内に`@customSubmit`（`v-on:customSubmit`と同じ）とすることで、ひとつのイベントとして（`@click`や`@submit`などのように）扱うことができる。
ここでは、`@customSubmit="onSubmit"`で、親インスタンスのメソッドを実行している。

## あとがき
公式ドキュメントを読むようにしているのですが、
それだけでは理解できなかったことや疑問に思ったことを調べると、
先駆者様がわかりやすく記事にしてくださっており、
とても助かっています。

用語の使い方や言い回しがおかしいところがあれば優しく指摘していただけると助かります。