今回は「ミニマムなサブコンポーネント」です。
フォルダ構成は現在こんな感じ。
[src/views]
Home.vue ＜＝＝ホーム画面
[src/router]
index.js ＜＝＝ルータ
[src]
App.vue ＜＝＝アプリケーション
main.js ＜＝＝Vueインスタンスの生成(宣言レンダリングといわれるやつ)
ルータを埋め込んだ抽象的なアプリケーションコンポーネントがあり、
ルータにはHOME画面のみ登録されています。
今回はホーム画面にサブコンポーネントを埋め込みます。
サブコンポーネント定義(src/components/VTuber.vue)
VTuberの名前、年齢、身長をリスト表示するだけのサブコンポーネントです。
<template>
<div>
<ul>
<li>名前:{{vname}}</li>
<li>年齢:{{age}}</li>
<li>身長:{{height}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Vtuber',
props: {
vname: String,
age: Number,
height: Number
}
}
</script>
コンポーネント内に埋め込むので便宜的にサブコンポーネントと呼んでいますが、基本的に同じコンポーネントです。
components/なんたら.vue => 他のコンポーネントに埋め込んで使うもの。サブコンポーネント。
views/かんたら.vue => 画面そのものを指すコンポーネント
こんな感じです。画面コンポーネントはサブコンポーネントを埋め込むので、それ自体は空っぽになりがちかも。
コンポーネントには(クラスのような)プロパティを持たせることができて、
コンポーネントインスタンスを通じてアクセスできます。
このケースでは名前、年齢、身長をプロパティとして用意しました。
最新のECMAScript標準仕様により、プリミティブ型でちゃんと型定義されています。(対応していないブラウザ向けにはBabelがよしなに変換してくれる)
String(文字列)、Number(数値、小数点含む)です。
他言語のように、整数(int)、小数点(float)とわかれてないんですね。
サブコンポーネント埋め込み
作ったVTuberサブコンポーネントをHOME画面(Homeコンポーネント)へ埋め込みます。
<template>
<div>
<h1>VTuberプロフィール</h1>
<VTuber vname="町田ちま" age="16" height="150"/> ＜＝＝ココ
</div>
</template>
<script>
import VTuber from '../components/VTuber.vue'
export default {
name: 'Home',
components: {
VTuber
}
}
</script>
このHOME画面は以下のように構成されます。
見出し：VTuberプロフィール(h1)
詳細情報：VTuber詳細情報(VTuberサブコンポーネント)
VTuberの詳細情報を渡すと、リスト形式で表示してくれる部品を、サブコンポーネントとして切り出しているわけです。
基本的にコンポーネントとは、それ自身で自律しているべきであり、必要なデータを渡せば勝手に動いてくれるものなので、コンポーネント間の通信はなければないほどよいです。特に子から親への通信は極力ない方がよいですが、サブコンポーネントでデータ取得エラーが起きて、親画面のヘッダに「Warning」と出したい場合等、必要なケースは出てくるかも。（このケースでも、サブコンポーネントをエラー表示デザインすればよいかもですが）
まぁ、必要になったら考えようと思います。
表示画面
npm run serveして確認。
次回
次は「ミニマムなデータ取得」をしてみようと思います。