$emitを使用して複数の引数を伴うカスタムイベント

Vue.jsの$emitを使用して複数の引数を伴うカスタムイベントを発行することができます。この場合、$emitメソッドの第二引数以降に渡したいデータを記述します。

以下は、複数の引数を伴う$emitの使用例です。

// 子コンポーネント
Vue.component('child-component', {
  template: '<button @click="sendMessage">Click me!</button>',
  methods: {
    sendMessage: function() {
      // 複数の引数を伴うカスタムイベントを発行する
      this.$emit('message', 'Hello', 'from', 'child', 'component');
    }
  }
});

// 親コンポーネント
new Vue({
  el: '#app',
  data: {
    messageFromChild: ''
  },
  template: '<div><child-component @message="handleMessage"></child-component><p>{{ messageFromChild }}</p></div>',
  methods: {
    handleMessage: function(...args) {
      // 受け取った引数を結合して表示
      this.messageFromChild = args.join(' ');
    }
  }
});

この例では、子コンポーネントのボタンがクリックされると、$emitメソッドを使用してmessageというカスタムイベントを発行しています。このイベントには複数の引数が含まれており、親コンポーネントでは@messageディレクティブでリッスンされ、handleMessageメソッドで受け取った引数を結合して表示しています。

$emitメソッドを使用することで、複数のデータをイベントとして伝えることができ、柔軟性の高いコンポーネント間の通信を実現することができます。