====

Vueコンポーネントのカスタムイベントを使用すると、Vueコンポーネント間で通信することができます。

例えば、同じ親コンポーネント内にある2つの子コンポーネントがあり、一方のコンポーネントのボタンがクリックされたときに他方のコンポーネントに通知を送りたいとします。これを実現するために、Vueコンポーネントにカスタムイベントを作成します。

まず、子コンポーネント内でカスタムイベントを定義します。以下の例では、ボタンがクリックされたときに`change`イベントが発火されるように定義しています。

```javascript
<template>
    <button @click="emitChange">ボタン</button>
</template>

<script>
    export default {
        methods: {
            emitChange() {
                this.$emit('change');
            }
        }
    }
</script>
```

次に、親コンポーネントでカスタムイベントを受け取ります。`v-on:change`ディレクティブを使って、子コンポーネントから発火された`change`イベントを処理することができます。以下の例では、カスタムイベントが発火されたときに`handleChange`メソッドが実行されるように定義しています。

```javascript
<template>
    <div>
        <child-component @change="handleChange"></child-component>
    </div>
</template>

<script>
    import ChildComponent from './ChildComponent.vue';

    export default {
        components: {
            ChildComponent
        },
        methods: {
            handleChange() {
                console.log('カスタムイベントが発火されました');
            }
        }
    }
</script>
```

親コンポーネントに`<child-component>`タグを書くことで、子コンポーネントが表示されます。そして、`@change`ディレクティブで子コンポーネントから発火された`change`イベントを受け取り、`handleChange`メソッドが実行されます。こうすることで、子コンポーネントのボタンがクリックされたときに親コンポーネントに通知を送ることができます。

カスタムイベントを使用することで、Vueコンポーネント間で効果的に通信を行うことができます。このようなコンポーネント間の通信は、より柔軟なアプリケーションの構築や、各コンポーネントの責任範囲の明確化に寄与します。
#laravel