今回はVueの$emitの引数に複数の値を渡して送る方法を解説します。
やり方は以下の2つです。
$emitの引数に複数の値を渡して親でそのまま受け取る$emitの第二引数にオブジェクトで渡して親で分割代入して受け取る
1.$emitの引数に複数の値を渡して親でそのまま受け取る
// 子コンポーネント
this.$emit('hoge', データ1, データ2);
// 親コンポーネント
methods: {
hoge(データ1, データ2) {
// 処理
}
}$emitする際に第二引数以降にデータをもたせて、親コンポーネントののmethodsでそのまま受け取ります。見たまんまですね。
引数はいくつ持たせても大丈夫ですが、$emitで送るデータ名と親で受け取る際の引数名は同じにしておく必要がある点に注意しましょう。
個人的にはこれが一番わかりやすいですね。
2.$emitの第二引数にオブジェクトで渡して親で分割代入して受け取る
// 子コンポーネント
this.$emit('hoge', {
データ1,
データ2,
});
// 親コンポーネント
methods: {
hoge({データ1, データ2}) {
// 処理
}
}$emitで第二引数にオブジェクトとして全部データをもたせて、親コンポーネントで分割代入で受け取る形です。どちらも{}で囲む形ですが、$emitの方はオブジェクト、親の方は分割代入なので間違えないようにしましょう。
こちらもオブジェクトのキー名と親の関数の引数名を同じにしておく必要があります。
3.その他の方法
$emitで送った複数のデータを親の関数でスプレッド構文で受け取るという方法もあります。
// 子コンポーネント
this.$emit('hoge', データ1, データ2);
// 親コンポーネント
methods: {
hoge(...args) {
// 処理
console.log(args[0]);
console.log(args[1]);
}
}しかし、見て分かる通りこの書き方は純粋にわかりにくいので使わないほうがいいです。送られてきたデータ名がわからないし、何個データが送られてきているのかもわからないです。
ググるとなぜかこのやり方が結構出てきますが、「args[0]って何だっけ？」って絶対なるのでおすすめしません。
まとめ
$emitの解説は結構出てきますが、複数の値を渡したいときのやり方があまり出てこなかったので記事を書きました。
こういう細かい情報って地味になかなか出てこないのでなんだかなぁという感じ。
