コンポーネントのカスタム イベント

  • 4 分

HTML 要素によって、ユーザーの操作に基づいてイベントを発生させることができます。 コンポーネントを使用すると、イベントを生成することで同じことを行うことができます。 親コンポーネントは、ボタンのクリック イベントをリッスンするコードを追加するのとほぼ同じ方法でこれらのイベントを処理できます。

イベントの登録

コンポーネントを作成するときには、コンポーネントが生成する可能性のあるすべてのイベントを、script の emits フィールドに一覧表示することによって登録します。

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

イベントの生成

$emit 関数を使用してイベントを生成します。 HTML コントロールが直接発生させたイベントを生成したい場合は、この操作をインラインで実行できます。 ボタンのイベント ハンドラー click を登録することで userUpdated イベントを生成できる方法に注目してください。

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

Note

使用しているショートカット @click は、一般には Vue でイベント ハンドラーを接続する方法です。

場合によっては、イベントを生成する前に他の手順を実行する必要があります。 コンポーネントで、更新された情報を返す前に、値をデータベースに保存する必要がある場合は、メソッドを追加できます。 メソッド内で、this.$emit を使用して、前と同様にイベントを発生させることができます。

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

データを使用してイベントを生成する

コンポーネントは、イベントを通じて、データを親に返さなければならない場合があります。 他のパラメーターを $emit に渡すことで、データを返すことができます。 true を返すことによって更新が成功したことを示したい場合は、呼び出しをこのように更新します。

<button @click="$emit('userUpdated', true)">Save user</button>

または、メソッドを使用することもできます。

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

イベントのリッスン

コンポーネントによって生成したイベントをリッスンするのは、通常の HTML コントロールによって発生したイベントをリッスンするのと同様です。 一般には親コンポーネントでメソッドを作成し、@click または他のイベントの場合と同じ @<event-name> 構文を使用して、そのメソッドをイベントに接続します。 イベントからデータが返されると、それは関数にパラメーターとして渡されます。

前に作成した userUpdated イベントのイベント ハンドラーを追加するには、次のコードを使用します。 Vue.js が camelCase 名から kebab-case 名に変換される方法に注意してください。

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}