[vue]親コンポーネントでパラメータ付きサブコンポーネントブロードキャストイベントをどのように処理し、独自のパラメータを追加するか
1017 ワード
次のように、親コンポーネントではリストレンダリングによって購入リストが維持されます.この購入リストはサブコンポーネントの削除と購入イベントを受け入れることができ、サブコンポーネントの削除はdelListイベントに戻り、購入ボタンは多重化されているためonpayイベントに戻り、同時に支払、出荷、確認、評価を表す時間変数whichTimeを返します.
パラメータなしのサブアセンブリブロードキャスト
ここで親コンポーネントのonDelListは通常の書き方であり、イベントを傍受した後、ループリストでlistとidxを取得し、curListsで自分を削除します.
パラメータ付きサブアセンブリブロードキャスト
onpayは特殊な使い方で、サブコンポーネントonpayではパラメータ値whichTimeを返しますが、親コンポーネントonpayではwhichTimeを受信するだけでなく、自身のlistとidxパラメータも追加します.彼の処理方法は、まず親コンポーネントでargumentsを使用してサブコンポーネントのすべてのパラメータ
:
onDelList(list, idx) {
},
onpay() {
let [list,idx, [whichTime]] = arguments;
}
:
ondel() {
this.$emit('delList');
},
onpay(whichTime) {
this.$emit('onpay', whichTime);
},
パラメータなしのサブアセンブリブロードキャスト
ここで親コンポーネントのonDelListは通常の書き方であり、イベントを傍受した後、ループリストでlistとidxを取得し、curListsで自分を削除します.
パラメータ付きサブアセンブリブロードキャスト
onpayは特殊な使い方で、サブコンポーネントonpayではパラメータ値whichTimeを返しますが、親コンポーネントonpayではwhichTimeを受信するだけでなく、自身のlistとidxパラメータも追加します.彼の処理方法は、まず親コンポーネントでargumentsを使用してサブコンポーネントのすべてのパラメータ
@onpay="onpay(list,idx, arguments)"
を受信し、関数ではlet [list,idx, [whichTime]] = arguments;
を使用してargumentsを解釈することです.ここでは,サブアセンブリに伝達されるパラメータが[whichTime]配列の形で伝達されることを示した.