$emitで複数の値を親コンポーネントに渡す方法 #Vue.js

はじめに

子のコンポーネントから親コンポーネントに値を渡す場合は、emitを使用することが多いと思います。今回は、複数の値を渡したい時があったので、アウトプットとして記述します。
ちなみにemit自体の解説は割愛しますので、ご了承ください。

サンプルコード

Child.vue

<template>
  <div>
    <p>Child</p>
    <button @click="click">親にメッセージを渡す</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      message1: 'メッセージ1',
      message2: 'メッセージ2',
    }
  },
  methods: {
    click() {
      this.$emit('click', this.message1, this.message2)
    },
  },
}
</script>

↑emitの第2引数以降にカンマ区切りで複数の値を渡してあげます。

Parent.vue

<template>
  <div>
    <P>Parent</P>
    <child @click="click"></child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child,
  },
  methods: {
    click(...args) {
      console.log(args)
      // 出力　['メッセージ1','メッセージ2']
      const [message1, message2] = args
      console.log(message1,message2)
      // 出力 メッセージ1 メッセージ2
    },
  },
}
</script>

↑click関数の引数では、レスト構文を使用して、子から渡した複数の値を配列で受け取ることができます。
その後、分割代入を使用し、配列の要素一つずつを取り出して各々の変数に代入しています。
あとは、親コンポーネントで各自自由に使ってくださいませ🙇‍♂️
はい、以上になります。

おわりに

短い記述になりますが、読んでくださりありがとうございます！
もし内容等に誤りがありましたら、ご指摘頂けると助かります。よろしくお願いいたします。