Frontend Academy · レッスン

コンポーネント Props と Emits

defineProps でデータを下へ渡し、defineEmits でイベントを上へ通知し、type と required の制約で Props を検証します。

「コンポーネント Props と Emits」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Vue 3のProps

Propsは親から子へデータを渡します。<script setup>では、defineProps()を使用してPropsを宣言します。Propsは子コンポーネントでは読み取り専用です。直接変更してはいけません。

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

Propのデフォルト値にwithDefaultsを使用する

defineProps()をwithDefaults()でラップすると、デフォルト値を指定できます。

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

テンプレートでPropsを渡す

静的な値は通常の属性として渡します。動的な値はv-bind（:）を使用して渡します。boolean属性は、値を指定せずに存在させることで渡します。

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits — 子から親への通信

子コンポーネントはイベントを発行して親に通信します。defineEmits()を使用して、コンポーネントが発行できるイベントを宣言し、返されたemit関数を呼び出します。

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

親でEmitsをリッスンする

テンプレートで@eventNameを使用すると、子コンポーネントからのカスタムイベントをリッスンできます。

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

カスタムコンポーネントでのv-model

カスタムコンポーネントのv-modelは、:modelValueと@update:modelValueを組み合わせた省略記法です。コンポーネントはこのPropを受け取り、更新イベントを発行する必要があります。

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

複数のv-modelバインディング

Vue 3では、名前付きの修飾子を使用して、1つのコンポーネントに複数のv-modelを設定できます。

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Propのバリデーション

Options APIまたはランタイムのProps宣言では、type、required、validatorの制約を追加します。TypeScriptベースのdefineProps()では、これをコンパイル時に提供できます。

PropとData — 一方向のデータフロー

Vueは一方向のデータフローを強制します。Propsは親から子へ流れ、イベントは子から親へ流れます。子がデータを変更する必要がある場合は、イベントを発行し、親が更新を処理します。

Propsの代替としてのスロット

単なるデータではなくHTMLやコンポーネントにするコンテンツには、スロットを使用します。親はコンポーネントのタグ内にコンテンツを指定し、子は<slot />でそのコンテンツをレンダリングします。

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

クイックチェック

子Vueコンポーネントは、どのようにしてイベントを親へ通知しますか？

復習: PropsとEmits

型付きのProp宣言にはdefinePropsを使用します。デフォルト値にはwithDefaultsを使用します。Propsは子コンポーネントでは読み取り専用です。発行するイベントの宣言と型付けにはdefineEmitsを使用します。親では@eventNameを使用してリッスンします。v-model = :modelValue + @update:modelValueです。一方向のデータフローでは、Propsは下向き、イベントは上向きに流れます。コンテンツやテンプレートの断片を渡すにはスロットを使用します。

よくある質問

「コンポーネント Props と Emits」レッスンは無料ですか？

はい。「コンポーネント Props と Emits」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「コンポーネント Props と Emits」で何を学びますか？

defineProps でデータを下へ渡し、defineEmits でイベントを上へ通知し、type と required の制約で Props を検証します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「コンポーネント Props と Emits」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る