Vue.js のカスタムイベント徹底解説

2025年8月21日

Vue.js

Vue.js でコンポーネント開発をしていると、親子間でのデータの受け渡しが複雑になってくることはありませんか。

そんな時に頼りになるのが「カスタムイベント」です。カスタムイベントを適切に活用することで、コンポーネント間の通信がシンプルになり、保守性の高いアプリケーションを構築できます。

この記事では、Vue.js のカスタムイベントについて基礎から応用まで段階的に解説いたします。初心者の方でも理解しやすいよう、具体的なコード例を交えながら説明していきますね。

背景

Vue.js のコンポーネント間通信の必要性

モダンなWebアプリケーション開発では、UIを小さなコンポーネントに分割して管理することが一般的です。Vue.js も例外ではありません。

しかし、コンポーネントを分割すると、それぞれのコンポーネント間でデータを共有する必要が出てきます。例えば、ボタンクリックの結果を親コンポーネントに伝えたり、フォームの入力値を他のコンポーネントに通知したりといった場面です。

コンポーネント間の通信方法を体系的に理解することで、効率的な開発が可能になるでしょう。

標準的なデータフローの限界

Vue.js では、基本的なデータフローとして以下の仕組みが提供されています。

javascript// 親から子へのデータ受け渡し（props）
// Parent.vue
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

javascript// Child.vue
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

この方法は単純な親子関係では問題ありませんが、以下のような限界があります。

子から親への逆方向の通信が困難
複数の階層を跨いだ通信が煩雑
兄弟コンポーネント間での直接的な通信ができない

これらの制約により、アプリケーションが複雑になるにつれて、コードの保守性が低下してしまうのです。

カスタムイベントが解決する課題

Vue.js のカスタムイベントシステムは、これらの通信の課題を解決するエレガントなソリューションです。

カスタムイベントの仕組みを理解することで、以下の図のような柔軟な通信パターンが実現できます。

mermaidflowchart TD
  Parent[親コンポーネント] 
  Child1[子コンポーネント1]
  Child2[子コンポーネント2]
  Grandchild[孫コンポーネント]
  
  Parent -->|props| Child1
  Parent -->|props| Child2
  Child1 -->|$emit| Parent
  Child2 -->|$emit| Parent
  Child1 --> Grandchild
  Grandchild -->|$emit| Child1
  Child1 -->|$emit| Parent

この図が示すように、カスタムイベントにより双方向の通信が可能になり、複雑なコンポーネント階層でも効率的にデータを管理できるようになります。

課題

親子コンポーネント間の複雑な通信

実際の開発現場では、単純なデータの受け渡しだけでは対応できない複雑な要件に直面することがあります。

例えば、以下のような場面を考えてみましょう。

javascript// 課題例：子コンポーネントのボタンクリックで親の状態を変更したい
// Parent.vue
<template>
  <div>
    <p>カウント: {{ count }}</p>
    <CounterButton />  <!-- どうやって count を更新する？ -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

javascript// CounterButton.vue
<template>
  <button @click="increment">カウントアップ</button>
</template>

<script>
export default {
  methods: {
    increment() {
      // 親の count を増加させたいが、どのように実現する？
    }
  }
}
</script>

props は親から子への一方向のデータフローなので、子から親のデータを直接変更することはできません。この制約により、状態管理が複雑になってしまいます。

兄弟コンポーネント間のデータ共有

同じ親を持つ兄弟コンポーネント間でデータを共有したい場合も、標準的な方法では困難です。

javascript// 兄弟コンポーネント間の通信が必要な例
// Parent.vue
<template>
  <div>
    <UserInput />     <!-- ユーザー入力 -->
    <UserDisplay />   <!-- 入力内容を表示 -->
  </div>
</template>

UserInput で入力されたデータを UserDisplay で表示したい場合、親コンポーネントを経由した複雑な実装が必要になってしまいます。

深い階層でのデータ受け渡し

コンポーネントの階層が深くなると、データの受け渡しが非常に煩雑になります。これは「prop drilling」と呼ばれる問題です。

mermaidflowchart TD
  App[App.vue] 
  Header[Header.vue]
  Navigation[Navigation.vue]
  MenuItem[MenuItem.vue]
  
  App -->|props| Header
  Header -->|props| Navigation  
  Navigation -->|props| MenuItem
  MenuItem -->|必要なのは App のデータ| App

上図のように、App.vue のデータを MenuItem.vue で使用したい場合、中間のすべてのコンポーネントでpropsを受け渡しする必要があります。これにより、関係のないコンポーネントにも不要なpropsが定義されてしまうのです。

解決策

$emit によるカスタムイベント発火

Vue.js では、$emit メソッドを使用してカスタムイベントを発火できます。これにより、子コンポーネントから親コンポーネントへ情報を伝達することが可能になります。

基本的な構文は以下の通りです。

javascript// 子コンポーネントでのイベント発火
this.$emit('イベント名', ペイロード)

先ほどのカウンター例を、カスタムイベントを使って解決してみましょう。

javascript// CounterButton.vue（子コンポーネント）
<template>
  <button @click="increment">カウントアップ</button>
</template>

<script>
export default {
  methods: {
    increment() {
      // 'increment' イベントを発火
      this.$emit('increment')
    }
  }
}
</script>

javascript// Parent.vue（親コンポーネント）
<template>
  <div>
    <p>カウント: {{ count }}</p>
    <CounterButton @increment="handleIncrement" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleIncrement() {
      this.count++
    }
  }
}
</script>

このように、子コンポーネントでイベントを発火し、親コンポーネントでそのイベントをリッスンすることで、子から親への通信が実現できます。

イベントリスナーでの受信処理

親コンポーネントでは、@イベント名 または v-on:イベント名 の形式でイベントリスナーを設定します。

javascript// イベントリスナーの記述方法
<ChildComponent @customEvent="handleEvent" />

// または
<ChildComponent v-on:customEvent="handleEvent" />

イベントリスナーでは、通常のメソッドと同様に処理を記述できます。

javascript// 複数の処理を含むイベントハンドラー
<template>
  <FormComponent @submit="handleFormSubmit" />
</template>

<script>
export default {
  methods: {
    handleFormSubmit() {
      // バリデーション
      if (this.validateForm()) {
        // データ送信
        this.submitData()
        // 成功メッセージ表示
        this.showSuccessMessage()
      }
    }
  }
}
</script>

イベントペイロードの活用

イベント発火時にデータ（ペイロード）を一緒に送信することで、より柔軟な通信が可能になります。

javascript// データ付きイベントの発火
// Child.vue
<template>
  <input @input="handleInput" v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput() {
      // 入力値をペイロードとして送信
      this.$emit('input-change', this.inputValue)
    }
  }
}
</script>

javascript// ペイロードを受信する親コンポーネント
// Parent.vue
<template>
  <div>
    <p>入力値: {{ receivedValue }}</p>
    <InputComponent @input-change="handleInputChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedValue: ''
    }
  },
  methods: {
    handleInputChange(value) {
      // 子コンポーネントからの値を受信
      this.receivedValue = value
    }
  }
}
</script>

複数のデータを送信したい場合は、オブジェクトとして送信できます。

javascript// 複数データの送信例
this.$emit('user-action', {
  action: 'click',
  timestamp: Date.now(),
  elementId: 'submit-button',
  userId: this.currentUserId
})

具体例

基本的なカスタムイベントの実装

最初に、シンプルなメッセージ表示コンポーネントを例に、基本的なカスタムイベントの実装方法を見てみましょう。

javascript// MessageInput.vue（メッセージ入力コンポーネント）
<template>
  <div class="message-input">
    <input 
      v-model="message" 
      @keyup.enter="sendMessage"
      placeholder="メッセージを入力してください"
    />
    <button @click="sendMessage">送信</button>
  </div>
</template>

<script>
export default {
  name: 'MessageInput',
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.message.trim()) {
        this.$emit('message-sent', this.message)
        this.message = ''
      }
    }
  }
}
</script>

javascript// MessageDisplay.vue（メッセージ表示コンポーネント）
<template>
  <div class="message-display">
    <div v-for="msg in messages" :key="msg.id" class="message">
      <span class="timestamp">{{ msg.timestamp }}</span>
      <span class="content">{{ msg.content }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageDisplay',
  props: ['messages']
}
</script>

javascript// App.vue（親コンポーネント）
<template>
  <div class="chat-app">
    <h1>シンプルチャット</h1>
    <MessageDisplay :messages="messages" />
    <MessageInput @message-sent="addMessage" />
  </div>
</template>

<script>
import MessageInput from './components/MessageInput.vue'
import MessageDisplay from './components/MessageDisplay.vue'

export default {
  name: 'App',
  components: {
    MessageInput,
    MessageDisplay
  },
  data() {
    return {
      messages: []
    }
  },
  methods: {
    addMessage(content) {
      const newMessage = {
        id: Date.now(),
        content: content,
        timestamp: new Date().toLocaleTimeString()
      }
      this.messages.push(newMessage)
    }
  }
}
</script>

この実装では、MessageInput コンポーネントが 'message-sent' イベントを発火し、App コンポーネントがそれを受信してメッセージリストに追加しています。

フォーム送信イベントの実例

より実践的な例として、バリデーション機能付きのフォームコンポーネントを実装してみましょう。

javascript// UserForm.vue（ユーザー登録フォーム）
<template>
  <form @submit.prevent="handleSubmit" class="user-form">
    <div class="form-group">
      <label>ユーザー名</label>
      <input 
        v-model="formData.username"
        :class="{ error: errors.username }"
        @blur="validateUsername"
      />
      <span v-if="errors.username" class="error-message">
        {{ errors.username }}
      </span>
    </div>
    
    <div class="form-group">
      <label>メールアドレス</label>
      <input 
        v-model="formData.email"
        type="email"
        :class="{ error: errors.email }"
        @blur="validateEmail"
      />
      <span v-if="errors.email" class="error-message">
        {{ errors.email }}
      </span>
    </div>
    
    <button type="submit" :disabled="!isFormValid">
      登録する
    </button>
  </form>
</template>

<script>
export default {
  name: 'UserForm',
  data() {
    return {
      formData: {
        username: '',
        email: ''
      },
      errors: {}
    }
  },
  computed: {
    isFormValid() {
      return Object.keys(this.errors).length === 0 && 
             this.formData.username && 
             this.formData.email
    }
  }
}
</script>

javascript// UserForm.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    validateUsername() {
      if (!this.formData.username) {
        this.$set(this.errors, 'username', 'ユーザー名は必須です')
      } else if (this.formData.username.length < 3) {
        this.$set(this.errors, 'username', 'ユーザー名は3文字以上で入力してください')
      } else {
        this.$delete(this.errors, 'username')
      }
    },
    
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.formData.email) {
        this.$set(this.errors, 'email', 'メールアドレスは必須です')
      } else if (!emailRegex.test(this.formData.email)) {
        this.$set(this.errors, 'email', '正しいメールアドレスを入力してください')
      } else {
        this.$delete(this.errors, 'email')
      }
    },
    
    handleSubmit() {
      this.validateUsername()
      this.validateEmail()
      
      if (this.isFormValid) {
        this.$emit('form-submit', {
          userData: { ...this.formData },
          timestamp: new Date().toISOString()
        })
      } else {
        this.$emit('form-error', {
          errors: { ...this.errors },
          message: 'フォームに入力エラーがあります'
        })
      }
    }
  }
}
</script>

javascript// Parent.vue（フォームを使用する親コンポーネント）
<template>
  <div class="registration-page">
    <h2>ユーザー登録</h2>
    
    <div v-if="loading" class="loading">
      登録処理中...
    </div>
    
    <div v-if="successMessage" class="success">
      {{ successMessage }}
    </div>
    
    <div v-if="errorMessage" class="error">
      {{ errorMessage }}
    </div>
    
    <UserForm 
      @form-submit="handleUserRegistration"
      @form-error="handleFormError"
    />
  </div>
</template>

<script>
import UserForm from './components/UserForm.vue'

export default {
  name: 'RegistrationPage',
  components: {
    UserForm
  },
  data() {
    return {
      loading: false,
      successMessage: '',
      errorMessage: ''
    }
  }
}
</script>

javascript// Parent.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    async handleUserRegistration(formData) {
      this.loading = true
      this.clearMessages()
      
      try {
        // API呼び出しをシミュレート
        await this.registerUser(formData.userData)
        this.successMessage = 'ユーザー登録が完了しました'
      } catch (error) {
        this.errorMessage = '登録に失敗しました。もう一度お試しください。'
      } finally {
        this.loading = false
      }
    },
    
    handleFormError(errorData) {
      this.errorMessage = errorData.message
    },
    
    clearMessages() {
      this.successMessage = ''
      this.errorMessage = ''
    },
    
    async registerUser(userData) {
      // 実際のAPI呼び出し処理
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.2 ? resolve() : reject(new Error('Server error'))
        }, 2000)
      })
    }
  }
}
</script>

この例では、フォームのバリデーション結果とデータ送信結果を、異なるカスタムイベントとして親コンポーネントに通知しています。

モーダル制御のイベント設計

次に、モーダルダイアログの制御を例に、より複雑なイベント設計を見てみましょう。

mermaidsequenceDiagram
  participant Parent as 親コンポーネント
  participant Button as ボタン
  participant Modal as モーダル
  
  Button->>Parent: modal-open イベント
  Parent->>Modal: showModal = true
  Modal->>Parent: modal-confirm イベント
  Parent->>Modal: 処理実行後 showModal = false
  Modal->>Parent: modal-cancel イベント  
  Parent->>Modal: showModal = false

上図のシーケンスに基づいて、モーダル制御のイベント設計を実装していきます。

javascript// Modal.vue（モーダルコンポーネント）
<template>
  <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="closeModal" class="close-button">×</button>
      </div>
      
      <div class="modal-body">
        <slot></slot>
      </div>
      
      <div class="modal-footer">
        <button @click="confirmAction" class="confirm-button">
          {{ confirmText }}
        </button>
        <button @click="cancelAction" class="cancel-button">
          {{ cancelText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '確認'
    },
    confirmText: {
      type: String,
      default: 'OK'
    },
    cancelText: {
      type: String,
      default: 'キャンセル'
    }
  }
}
</script>

javascript// Modal.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    confirmAction() {
      this.$emit('modal-confirm', {
        action: 'confirm',
        timestamp: Date.now()
      })
    },
    
    cancelAction() {
      this.$emit('modal-cancel', {
        action: 'cancel',
        timestamp: Date.now()
      })
    },
    
    closeModal() {
      this.$emit('modal-close', {
        action: 'close',
        timestamp: Date.now()
      })
    },
    
    handleOverlayClick() {
      // オーバーレイクリックでモーダルを閉じる
      this.closeModal()
    }
  },
  
  mounted() {
    // ESCキーでモーダルを閉じる
    document.addEventListener('keydown', this.handleEscKey)
  },
  
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleEscKey)
  },
  
  methods: {
    handleEscKey(event) {
      if (event.key === 'Escape' && this.visible) {
        this.closeModal()
      }
    }
  }
}
</script>

javascript// DeleteConfirmation.vue（削除確認ページ）
<template>
  <div class="delete-page">
    <h2>ユーザー管理</h2>
    
    <div class="user-list">
      <div v-for="user in users" :key="user.id" class="user-item">
        <span>{{ user.name }}</span>
        <button @click="showDeleteModal(user)" class="delete-button">
          削除
        </button>
      </div>
    </div>
    
    <Modal
      :visible="deleteModal.show"
      title="ユーザー削除確認"
      confirm-text="削除する"
      @modal-confirm="handleDeleteConfirm"
      @modal-cancel="handleDeleteCancel"
      @modal-close="handleDeleteCancel"
    >
      <p>{{ deleteModal.user?.name }} を削除してもよろしいですか？</p>
      <p class="warning">この操作は取り消せません。</p>
    </Modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'DeleteConfirmation',
  components: {
    Modal
  },
  data() {
    return {
      users: [
        { id: 1, name: '田中太郎' },
        { id: 2, name: '佐藤花子' },
        { id: 3, name: '鈴木一郎' }
      ],
      deleteModal: {
        show: false,
        user: null
      }
    }
  }
}
</script>

javascript// DeleteConfirmation.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    showDeleteModal(user) {
      this.deleteModal.user = user
      this.deleteModal.show = true
    },
    
    async handleDeleteConfirm() {
      try {
        await this.deleteUser(this.deleteModal.user.id)
        
        // ユーザーリストから削除
        this.users = this.users.filter(
          user => user.id !== this.deleteModal.user.id
        )
        
        // 成功メッセージを表示
        this.showMessage('ユーザーを削除しました', 'success')
        
      } catch (error) {
        this.showMessage('削除に失敗しました', 'error')
      } finally {
        this.closeDeleteModal()
      }
    },
    
    handleDeleteCancel() {
      this.closeDeleteModal()
    },
    
    closeDeleteModal() {
      this.deleteModal.show = false
      this.deleteModal.user = null
    },
    
    async deleteUser(userId) {
      // API呼び出しをシミュレート
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.1 ? resolve() : reject(new Error('Delete failed'))
        }, 1000)
      })
    },
    
    showMessage(text, type) {
      // メッセージ表示のロジック
      console.log(`${type}: ${text}`)
    }
  }
}
</script>

リアルタイム通知システム

最後に、リアルタイム通知システムを例に、複数のコンポーネントが連携するより高度なイベント設計を実装してみましょう。

javascript// NotificationItem.vue（通知アイテムコンポーネント）
<template>
  <div :class="notificationClass" class="notification-item">
    <div class="notification-icon">
      <span :class="iconClass"></span>
    </div>
    
    <div class="notification-content">
      <h4>{{ notification.title }}</h4>
      <p>{{ notification.message }}</p>
      <small>{{ formattedTime }}</small>
    </div>
    
    <div class="notification-actions">
      <button @click="markAsRead" v-if="!notification.read">
        既読
      </button>
      <button @click="removeNotification">
        削除
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotificationItem',
  props: {
    notification: {
      type: Object,
      required: true
    }
  },
  computed: {
    notificationClass() {
      return {
        'notification-info': this.notification.type === 'info',
        'notification-warning': this.notification.type === 'warning',
        'notification-error': this.notification.type === 'error',
        'notification-success': this.notification.type === 'success',
        'notification-read': this.notification.read
      }
    },
    
    iconClass() {
      const iconMap = {
        info: 'icon-info',
        warning: 'icon-warning', 
        error: 'icon-error',
        success: 'icon-success'
      }
      return iconMap[this.notification.type] || 'icon-info'
    },
    
    formattedTime() {
      return new Date(this.notification.timestamp).toLocaleString()
    }
  }
}
</script>

javascript// NotificationItem.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    markAsRead() {
      this.$emit('notification-read', {
        notificationId: this.notification.id,
        timestamp: Date.now()
      })
    },
    
    removeNotification() {
      this.$emit('notification-remove', {
        notificationId: this.notification.id,
        timestamp: Date.now()
      })
    }
  }
}
</script>

javascript// NotificationCenter.vue（通知センター）
<template>
  <div class="notification-center">
    <div class="notification-header">
      <h3>通知センター</h3>
      <div class="notification-controls">
        <button @click="markAllAsRead" :disabled="!hasUnreadNotifications">
          すべて既読
        </button>
        <button @click="clearAllNotifications" :disabled="notifications.length === 0">
          すべて削除
        </button>
      </div>
    </div>
    
    <div class="notification-filter">
      <button 
        v-for="filter in filters" 
        :key="filter.value"
        @click="setFilter(filter.value)"
        :class="{ active: currentFilter === filter.value }"
      >
        {{ filter.label }}
      </button>
    </div>
    
    <div class="notification-list">
      <NotificationItem
        v-for="notification in filteredNotifications"
        :key="notification.id"
        :notification="notification"
        @notification-read="handleNotificationRead"
        @notification-remove="handleNotificationRemove"
      />
      
      <div v-if="filteredNotifications.length === 0" class="empty-state">
        通知はありません
      </div>
    </div>
  </div>
</template>

<script>
import NotificationItem from './NotificationItem.vue'

export default {
  name: 'NotificationCenter',
  components: {
    NotificationItem
  },
  props: {
    notifications: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentFilter: 'all',
      filters: [
        { value: 'all', label: 'すべて' },
        { value: 'unread', label: '未読' },
        { value: 'info', label: '情報' },
        { value: 'warning', label: '警告' },
        { value: 'error', label: 'エラー' }
      ]
    }
  }
}
</script>

javascript// NotificationCenter.vue の算出プロパティとメソッド
<script>
export default {
  // ... 省略
  computed: {
    filteredNotifications() {
      if (this.currentFilter === 'all') {
        return this.notifications
      } else if (this.currentFilter === 'unread') {
        return this.notifications.filter(n => !n.read)
      } else {
        return this.notifications.filter(n => n.type === this.currentFilter)
      }
    },
    
    hasUnreadNotifications() {
      return this.notifications.some(n => !n.read)
    }
  },
  
  methods: {
    setFilter(filter) {
      this.currentFilter = filter
    },
    
    handleNotificationRead(eventData) {
      this.$emit('notification-read', eventData)
    },
    
    handleNotificationRemove(eventData) {
      this.$emit('notification-remove', eventData)
    },
    
    markAllAsRead() {
      this.$emit('notifications-mark-all-read', {
        timestamp: Date.now()
      })
    },
    
    clearAllNotifications() {
      this.$emit('notifications-clear-all', {
        timestamp: Date.now()
      })
    }
  }
}
</script>

javascript// App.vue（アプリケーションルート）
<template>
  <div class="app">
    <header class="app-header">
      <h1>リアルタイム通知システム</h1>
      <div class="notification-badge" @click="toggleNotificationCenter">
        🔔
        <span v-if="unreadCount > 0" class="badge">{{ unreadCount }}</span>
      </div>
    </header>
    
    <main class="app-main">
      <button @click="addSampleNotification" class="test-button">
        テスト通知を追加
      </button>
      
      <NotificationCenter
        v-if="showNotificationCenter"
        :notifications="notifications"
        @notification-read="handleNotificationRead"
        @notification-remove="handleNotificationRemove"
        @notifications-mark-all-read="handleMarkAllAsRead"
        @notifications-clear-all="handleClearAllNotifications"
      />
    </main>
  </div>
</template>

<script>
import NotificationCenter from './components/NotificationCenter.vue'

export default {
  name: 'App',
  components: {
    NotificationCenter
  },
  data() {
    return {
      notifications: [],
      showNotificationCenter: false,
      notificationIdCounter: 1
    }
  },
  computed: {
    unreadCount() {
      return this.notifications.filter(n => !n.read).length
    }
  }
}
</script>

javascript// App.vue のメソッド部分
<script>
export default {
  // ... 省略
  methods: {
    toggleNotificationCenter() {
      this.showNotificationCenter = !this.showNotificationCenter
    },
    
    addSampleNotification() {
      const types = ['info', 'warning', 'error', 'success']
      const type = types[Math.floor(Math.random() * types.length)]
      
      const notification = {
        id: this.notificationIdCounter++,
        type: type,
        title: `${type.toUpperCase()} 通知`,
        message: `これは${type}タイプの通知です。`,
        timestamp: Date.now(),
        read: false
      }
      
      this.notifications.unshift(notification)
    },
    
    handleNotificationRead(eventData) {
      const notification = this.notifications.find(
        n => n.id === eventData.notificationId
      )
      if (notification) {
        notification.read = true
      }
    },
    
    handleNotificationRemove(eventData) {
      this.notifications = this.notifications.filter(
        n => n.id !== eventData.notificationId
      )
    },
    
    handleMarkAllAsRead() {
      this.notifications.forEach(notification => {
        notification.read = true
      })
    },
    
    handleClearAllNotifications() {
      this.notifications = []
    }
  },
  
  mounted() {
    // 定期的に通知を追加（デモ用）
    this.notificationTimer = setInterval(() => {
      if (Math.random() > 0.7) {
        this.addSampleNotification()
      }
    }, 10000)
  },
  
  beforeDestroy() {
    if (this.notificationTimer) {
      clearInterval(this.notificationTimer)
    }
  }
}
</script>

この実装では、複数のコンポーネントが階層的にカスタムイベントを使用して連携しています。NotificationItem から NotificationCenter、さらに App コンポーネントへとイベントが伝播していく様子がわかりますね。

まとめ

Vue.js のカスタムイベントは、コンポーネント間通信の強力なツールです。適切に活用することで、以下のような効果が期待できます。

カスタムイベントのメリット

項目	効果	詳細
疎結合	保守性向上	コンポーネント同士の依存関係を最小限に抑制
再利用性	開発効率化	汎用的なコンポーネント設計が可能
可読性	コード品質向上	イベント名で処理内容が明確に
拡張性	機能追加容易	新しいイベントリスナーの追加が簡単