Vue.jsにおけるイベント

Vue.jsにおけるイベントは、ユーザーの操作やコンポーネント間の通信など、さまざまなアクションに対する反応として定義されます。Vue.jsでは、v-on ディレクティブを使用してイベントをリッスンし、そのイベントが発生したときに実行されるメソッドを指定します。

そもそもVue.jsとは？という方は以下のリンクからご覧ください

Vue.jsとは

ボタンクリックなどのイベントのリッスン:

<div id="app">
  <!-- ボタンクリック時に、clickHandlerメソッドが呼び出される -->
  <button v-on:click="clickHandler">Click me</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    clickHandler: function() {
      alert('ボタンがクリックされました！');
    }
  }
});
</script>

上記の例では、v-on:click ディレクティブを使用してボタンのクリックイベントをリッスンし、clickHandler メソッドが呼び出されます。methods オプション内で clickHandler メソッドを定義しており、このメソッドが実行されるとアラートが表示されます。

親から子へのイベントの伝達:

親コンポーネントから子コンポーネントにデータを渡す場合、props を使用します。しかし、子コンポーネントから親コンポーネントにデータを渡す必要がある場合は、イベントを使用します。

子コンポーネント内で、$emit メソッドを使用してカスタムイベントを発火します。そして、親コンポーネント側でそのカスタムイベントをリッスンし、データを受け取ります。

<!-- 子コンポーネント -->
<template>
  <button v-on:click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage: function() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
};
</script>

<!-- 親コンポーネント -->
<template>
  <div>
    <child-component v-on:message-sent="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleMessage: function(message) {
      this.receivedMessage = message;
    }
  }
};
</script>

上記の例では、子コンポーネント内で sendMessage メソッドが呼び出されると、message-sent イベントが発火し、その際に 'Hello from child!' というデータが伝達されます。親コンポーネント側では、v-on:message-sent を使用してこのカスタムイベントをリッスンし、handleMessage メソッドが呼び出されると受け取ったメッセージを receivedMessage に設定します。

Vue.jsのイベントを使うことで、ユーザーの操作に反応するだけでなく、コンポーネント間のデータの受け渡しや通信など、さまざまな場面でアプリケーションの挙動を制御することができます。