Vueの$emitで複数の値を渡す方法

Vueの$emitで複数の値を渡す方法Vue

今回はVueの$emitの引数に複数の値を渡して送る方法を解説します。

やり方は以下の2つです。

  1. $emitの引数に複数の値を渡して親でそのまま受け取る
  2. $emitの第二引数にオブジェクトで渡して親で分割代入して受け取る

 

スポンサーリンク

1.$emitの引数に複数の値を渡して親でそのまま受け取る

// 子コンポーネント
this.$emit('hoge', データ1, データ2);

// 親コンポーネント
methods: {
  hoge(データ1, データ2) {
    // 処理
  }
}

$emitする際に第二引数以降にデータをもたせて、親コンポーネントののmethodsでそのまま受け取ります。見たまんまですね。

$emitで送るデータ名と親の関数の引数名は同じにしておくとわかりやすいです。

個人的にはこれが一番わかりやすいですね。

 

2.$emitの第二引数にオブジェクトで渡して親で分割代入して受け取る

// 子コンポーネント
this.$emit('hoge', {
  data1: データ1,
  data2: データ2,
});

// 親コンポーネント
methods: {
  hoge({data1, data2}) {
    // 処理
  }
}

$emitで第二引数にオブジェクトとして全部データをもたせて、親コンポーネントで分割代入で受け取る形です。どちらも{}で囲む形ですが、$emitの方はオブジェクト、親の方は分割代入なので間違えないようにしましょう。

こちらもオブジェクトのキー名と親の関数の引数名を同じにしておくとわかりやすいです。

 

3.その他の方法

$emitで送った複数のデータを親の関数でスプレッド構文で受け取るという方法もあります。

// 子コンポーネント
this.$emit('hoge', データ1, データ2);

// 親コンポーネント
methods: {
  hoge(...args) {
    // 処理
    console.log(args[0]);
    console.log(args[1]);
  }
}

しかし、見て分かる通りこの書き方は純粋にわかりにくいので使わないほうがいいです。送られてきたデータ名がわからないし、何個データが送られてきているのかもわからないです。

ググるとなぜかこのやり方が結構出てきますが、「args[0]って何だっけ?」って絶対なるのでやめましょうね。

 

まとめ

$emitの解説は結構出てきますが、複数の値を渡したいときのやり方があまり出てこなかったので記事を書きました。

こういう細かい情報って地味になかなか出てこないのでなんだかなぁという感じ。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
Vue
スポンサーリンク
でざなり