Vue Academy · レッスン

definePropsとdefineEmits

defineProps ()とdefineEmits ()による型付きprops、withDefaults()によるデフォルト値について学習します。

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

コンポーネント間の通信

コンポーネントはpropsでデータを受け取り、eventsで上位へメッセージを送ります。<script setup>では、definePropsおよびdefineEmitsマクロを使ってこれらを宣言します。

ランタイム形式の defineProps

Options APIと同じように、ランタイムオブジェクトを使ってpropsを宣言できます。JavaScriptとTypeScriptの両方で動作します。

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

TypeScript のジェネリックを使った defineProps

TypeScriptでは、ジェネリックを使って型を渡すことで、より簡潔で型チェックされたpropsを定義できます。コンパイラーがその型をランタイムの宣言に変換します。

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

? によるオプショナル props

型のプロパティに疑問符を付けると、オプショナルにできます。親から渡されなかったオプショナルpropsはundefinedになる場合があります。

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

withDefaults によるデフォルト値

型ベースの形式にはデフォルト値を指定する場所がないため、VueではwithDefaultsを用意しています。definePropsをラップし、デフォルト値のオブジェクトを渡します。

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

テンプレートで props を使う

Propsはリアクティブです。テンプレートから直接参照するか、スクリプト内ではprops.xを使って参照します。

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Props は読み取り専用

子コンポーネント内でpropsを変更してはいけません。Propsの流れは親から子への一方向です。ローカルで編集できるコピーが必要な場合は、computedまたはローカルなrefから作成します。

defineEmits でイベントを宣言する

defineEmitsは、コンポーネントが発生させられるイベントを宣言します。ランタイム形式では、イベント名の配列を受け取ります。

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

TypeScript で型付きイベントを定義する

型ベースの形式では、イベント名とペイロードの型を指定できます。これにより、誤った引数の型を発行するといったミスを検出できます。

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

ペイロード付きでイベントを発行する

emitをイベント名と任意のデータとともに呼び出します。親は@submitでリッスンし、ペイロードを受け取ります。

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

全体を組み合わせる

子コンポーネントがtitle propを受け取り、submitイベントを発行します。親はその両方に反応します。型が付いた一方向のデータと明示的なイベントを、すっきりと組み合わせられます。

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

クイックチェック

propsとemitsについての理解を確認してください。

まとめ

<script setup>でのコンポーネントの入出力について学びました。

definePropsは入力を宣言します（ランタイムオブジェクトまたはTSジェネリック）。
オプショナルpropsには?を、デフォルト値にはwithDefaultsを使用します。
Propsは読み取り専用で、一方向に流れます。
defineEmitsはイベントを宣言し、必要に応じてイベント名とペイロードに型を付けられます。

よくある質問

「definePropsとdefineEmits」レッスンは無料ですか？

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

「definePropsとdefineEmits」で何を学びますか？

defineProps ()とdefineEmits ()による型付きprops、withDefaults()によるデフォルト値について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「definePropsとdefineEmits」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る