Twinkle

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

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

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

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

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

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

<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