Vueにおけるイベントの発行

既にご存知の通り、データは 親コンポーネントから子コンポーネントへと流れます。 ではここで、子コンポーネントが親とどのように 通信するかを見てみましょう。 これは、イベントの発行を使用して行われます。 実際に見ていきましょう。

親コンポーネントに 次のようなメソッドがあるとします：

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

このメソッドをパラメータとして 子コンポーネントに渡しましょう：

App.vue<template>
  <User @show="func" />
</template>

emits設定で 発行されるイベントを記述しましょう：

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

では、子コンポーネント内に クリックを処理するボタンを 作成しましょう：

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

クリックハンドラーを作成します：

components/User.vuemethods: {
  handle() {
    
  }
}

では、クリックハンドラー内で 親の関数を実行させてみましょう。 そのためには、$emit関数を使用して イベントを発行し、そのパラメータとして 発行するイベントの名前を指定します：

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}