[Props]viewsでコンポーネントを使ってみる

viewsでコンポーネントを使ってみる

<template>
  <div>
    <test-title />
    <div>テストテーブル</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import TestTitle from "@/components/molecules/TestTitle.vue";

@Component({
  components: {
    TestTitle,
  },
})
export default class testViews extends Vue {}
</script>

↓testTitle.vue

<template>
  <div>タイトルだよ</div>
</template>

<script lang="ts">
export default {};
</script>

↓画面表示

タイトルだよ
テストテーブル

propsを使うとき

viewsごとにタイトルが違う場合、viewsからコンポーネントにデータを渡す必要がある

<page-title title="画面ごとのタイトル" />

このようなデータの受け渡しのことを**「プロパティ（props）の受け渡し」または単に「プロパティのバインディング」**と言います。

具体的には、親コンポーネントから子コンポーネントにデータを渡す方法です。親コンポーネントのテンプレートで、子コンポーネントのタグに対してプロパティ（title="画面ごとのタイトル"）を設定することを「プロパティバインディング」と呼びます。

詳細：

• 親コンポーネント: <page-title title="L画面ごとのタイトル" />
  • 親コンポーネントは、title という名前のプロパティを子コンポーネントに渡します。
• 子コンポーネント: @Prop() で title プロパティを受け取ります。
  • 子コンポーネントは、この title を受け取って使います。

他の表現方法：

• データのフロー（データフロー）: 親から子へデータが流れる過程を指します。Vueでは「単方向データフロー」とも言われ、親から子へのデータ渡し（props）が基本です。
• プロパティバインディング: 親コンポーネントから子コンポーネントにプロパティをバインド（紐付け）すること。

つまり、このデータの受け渡しは「プロパティの受け渡し」または「プロパティバインディング」と呼ばれます。

コンポーネント側の書き方

<template>
  <div>
    <span>{{ title }}</span>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TestTitle extends Vue {
  @Prop({ required: true })
  title!: string;
}
</script>

このコードを一つずつ分解して説明するね！

---

1. @Prop({ required: true })

これは Vue の親コンポーネントから渡されるプロパティ（props）を定義する ためのもの。
具体的には、title という名前のプロパティを 「親から必ず渡さなければならない」 というルールを設定している。

@Prop({ required: true })

• @Prop(...)：親コンポーネントからデータ（props）を受け取るためのデコレーター
• { required: true }：この title は 必須（required） なので、親から渡されなかったらエラーになる

---

2. title!: string;

これは TypeScript の型定義 をしている。

title!: string;

• title：このコンポーネント内で使うプロパティの名前
• !:
  • ! は「この変数は絶対に値があるから、undefined じゃないよ」と TypeScript に伝えるためのもの。
  • TypeScript の 「プロパティの初期化チェック」 を無効にする役割がある。
• : string;：この title は 文字列（string） のデータを受け取るよ、という意味

---

3. 親コンポーネントからの受け渡し

この title は、親コンポーネントで 次のように値を渡す と使える。

<test-title title="これはテストタイトル" />

この title="これはテストタイトル" の部分が、子コンポーネントの title に渡る。

---

まとめ

@Prop({ required: true }) // 親コンポーネントからのデータを受け取る（必須）
title!: string;           // `title` は必ず存在し、文字列である

これによって、親から渡された title の値を 子コンポーネントで受け取って使える ようになる！