今回は「ミニマムなサブコンポーネント」です。

フォルダ構成は現在こんな感じ。

[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して確認。

次回

次は「ミニマムなデータ取得」をしてみようと思います。