Vue.js　

説明

Vue.js では、コンポーネント間でデータをやり取りする方法はいくつかあります。

今回は、カスタムイベントを説明します。

カスタムイベントを使う

子コンポーネントから親コンポーネントにデータを伝えるには、カスタムイベントを発生させます。

子コンポーネントの定義:

Vue.component('child-component', {
  template: '<button v-on:click="sendMessage">メッセージを送る</button>',
  methods: {
    sendMessage: function () {
      this.$emit('message', 'Hello from child component!')
    }
  }
})

親コンポーネントから子コンポーネントにイベントを割り当てる例:

<child-component v-on:message="handleMessage"></child-component>

親コンポーネントでイベントを処理する例:

methods: {
  handleMessage: function (message) {
    console.log(message) // 'Hello from child component!'
  }
}