Vue 3でのプロパティ APIとイベントハンドリングの見直し

作成日 2025.02.10
Vue.js
Vue.js

Vue 3ではプロパティAPIとイベントハンドリングの設計が大幅に改善され、より柔軟で効率的なコードが書けるようになりました。本記事では、その詳細な使い方とベストプラクティスを解説します。

1. プロパティ APIとは
2. デフォルト値の設定
3. プロパティの型チェック
4. プロパティに対するバリデーション
5. イベントハンドリングの基本
6. イベントの引数
7. イベント修飾子
8. カスタムイベントの作成
9. emitの型チェック
10. イベントオプションの活用
11. v-modelの改良点
12. 複数のv-model
13. まとめ

プロパティ APIとは

プロパティAPIは、コンポーネント間でデータを受け渡すための機能です。

export default {
  props: {
    title: String,
    isActive: Boolean
  }
}

デフォルト値の設定

プロパティにデフォルト値を設定する方法です。

props: {
  count: {
    type: Number,
    default: 0
  }
}

プロパティの型チェック

型チェックを行うことでバグを未然に防ぎます。

props: {
  user: {
    type: Object,
    required: true
  }
}

プロパティに対するバリデーション

プロパティの値をバリデーションします。

props: {
  age: {
    type: Number,
    validator: (value) => value > 0
  }
}

イベントハンドリングの基本

Vue 3ではイベントハンドリングがシンプルに書けます。

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

イベントの引数

イベントに引数を渡す方法です。

<button @click="handleClick(42)">Click</button>

methods: {
  handleClick(value) {
    console.log(value)
  }
}

イベント修飾子

Vueではイベントを修飾して特定の動作を制御できます。

<button @click.stop="handleClick">Stop Propagation</button>
<button @click.prevent="handleClick">Prevent Default</button>

カスタムイベントの作成

カスタムイベントを定義し、親コンポーネントに伝播します。

<template>
  <button @click="$emit('custom-event')">Emit Event</button>
</template>

emitの型チェック

Vue 3ではemitの型を定義できます。

emits: ['increment']

イベントオプションの活用

オプションを使ってイベントの動作を細かく制御します。

emits: {
  increment: null,
  submit: (payload) => payload !== ''
}

v-modelの改良点

Vue 3ではv-modelが大幅に改善されました。

<template>
  <input v-model="message" />
</template>

props: ['modelValue'],
emits: ['update:modelValue'],

複数のv-model

Vue 3では複数のv-modelを使用できます。

<template>
  <input v-model:title="title" v-model:content="content" />
</template>

props: ['title', 'content'],
emits: ['update:title', 'update:content'],