0Pricing
Vue Academy · レッスン

Propsとカスタムイベント

propsでデータを子へ渡し、イベントをemitして親へ伝えます

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

親子間の通信

コンポーネントは2方向に通信します。

  • Propsは親から子へデータを渡します
  • Eventsは子から親へメッセージを送ります

この一方向のデータフローにより、アプリを予測しやすく保てます。

Propsの宣言

子コンポーネントは、受け取るpropsを宣言します。script setupではdefinePropsを使用します。

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

型付きProps

propsをオブジェクトとして宣言すると、検証用の型を指定できます。

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

デフォルト値と必須Props

propsをrequiredとして指定したり、default値を設定したりできます。

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

親からPropsを渡す

親コンポーネントは属性としてデータを渡します。動的な値をバインドするには:を使用します。

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Propの命名規則

JSではpropsをcamelCaseで宣言し、テンプレートではkebab-caseで渡します。

  • JSのprop: isActive
  • テンプレートの属性: :is-active

Vueが2つの形式を自動的に変換します。

Propsは読み取り専用

子コンポーネントはpropsを直接変更してはいけません。

  • Propsは一方向に、下へ流れます
  • Propsを変更すると予測しにくくなり、警告が発生します
  • 共有データを変更するには、イベントを発行して親コンポーネントに更新させます

発行するイベントの宣言

子コンポーネントは、defineEmitsを使って発行するイベントを宣言します。

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

イベントの発行

emit関数を呼び出すと、必要に応じてペイロードを添えてイベントを上へ送信できます。

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Options APIでのイベント発行

Options APIでは、代わりにthis.$emitを呼び出します。

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

親でイベントをリッスンする

親コンポーネントは@event-nameでリッスンし、ペイロードを受け取ります。

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

理解度チェック

propsとイベントについての理解度を確認しましょう。

まとめ: Propsとイベント

コンポーネント間の通信について学びました。

  • definePropsで型とデフォルト値を持つpropsを宣言します
  • Propsは下へ流れ、読み取り専用です
  • defineEmitsでイベントを宣言します
  • emit("name", payload)でイベントを上へ送信します
  • 親コンポーネントは@eventでリッスンします

次は、スロットとスコープ付きスロットについて学びます。

よくある質問

「Propsとカスタムイベント」レッスンは無料ですか？

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

「Propsとカスタムイベント」で何を学びますか？

propsでデータを子へ渡し、イベントをemitして親へ伝えます ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Propsとカスタムイベント」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. コンポーネントの作成と登録
  2. Propsとカスタムイベント
  3. スロットとスコープ付きスロット
← Vue Academyに戻る