まずは Vuetify 起動時の data からの表示を見てみる

App 側でのとってくるコンポーネントの指定と描画

Vuetify の App コンポーネントで HelloWorld コンポーネントを

import して使うコードを見てみる。

まず script のタグのところから見ていくと

import HelloWorld from './components/HelloWorld';

これで

とってくるコンポーネントの場所を指定してインポートして

export default {
  name: 'App',

  components: {
    HelloWorld,
  },
};

と、エクスポートするときに自分のコンポーネント名と、使用する子供コンポーネント名を指定している。

<template>
  <v-app>
    <v-app-bar>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

そして App の template 内部で <HelloWorld/> として呼び出して、その結果描画されている。

次はとって来ている子供コンポーネントの HelloWorld のファイルを見てみる

とって来ている HelloWorld コンポーネント

<template>
  <v-container>
    {{message}}
  </v-container>
</template>

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      message: 'message from HelloWorld Data',
    }),
  }
</script>

template の v-container でこのコンポーネントで使う変数の呼び出しをして

script で自分のコンポーネント名の指定と、使う data の指定をしている

data とコンポーネントの解釈のまとめ

prop と違ってコンポーネントに渡すことはなく、コンポーネントに結びついているので、コンポーネントを呼び出せば、それについて来て自動的に使われる

コンポーネントの付属品？として解釈した。

prop の中身を出してみる

prop の概念 DTO

一方 prop は DTO, data transfer object という概念のようだ。

データを別のコンポーネントに渡すための一時的な場所？として解釈する

ja.wikipedia.org

prop の取り扱いを見てみる

dev83.com

子供コンポーネントは親コンポーネントにもらった prop を表示する処理で

親コンポーネントで prop を定義している

親コンポーネントでの prop の定義と子供への受け渡しを書く

script で

<script>
import HelloWorld from './components/HelloWorld';
import Render from './components/Render';

export default {
  name: 'App',

  components: {
    HelloWorld,
    Render,
  },
  data: () => {
    return {
      message : 'This is  App data message'
    }
  }
};
</script>

Render する子供を import して

component として使うと指定して

親の data に子供に渡す message を定義する

<template>
    <v-main>
      <HelloWorld/>
      <Render :message='message'/>
    </v-main>
</template>

そして template で描画するときに呼び出す子供である Render に値を渡す

この :message は v-bind:message の省略形である。

子供の Render で受け取って描画する処理をかく

<template>
  <v-container>
    {{message}}
  </v-container>
</template>

<script>
  export default {
    name: 'Render',
    props: ['message']
  }
</script>