Vue 3 はコンポーネント props の反応性を排除します

Question

EditTransaction コンポーネントがあり、次のように呼び出します:

リーリー

ご覧のとおり、トランザクション オブジェクトを送信しています。これはエディタなので、トランザクション オブジェクトをリアクティブにしたくありません。誰かがエディターを閉じた場合、変更されたトランザクション オブジェクトではなく、元のトランザクション オブジェクトが必要です。したがって、私が正しく、プロキシを削除したい場合は、それをエディターに置きます。 リーリー

エディター テンプレート内には、v-model 値がフォーム オブジェクトにバインドされているいくつかのアセット コンポーネントがあります。

リーリー

問題は、トランザクション名を変更すると、フォーム オブジェクトが変更され、トランザクション プロパティも変更されることです。したがって、トランザクション プロパティはリアクティブであるため、親データ内の名前も変更されます。 何が間違っているのでしょうか、またはデリゲートなしでプロパティ値を使用してコンポーネントの作成時に値が設定されるフォームオブジェクトを実装するにはどうすればよいですか?

Answer 1

小道具を使用して 初期値 を子コンポーネントの状態に渡すのが一般的です。これは、ローカルの data 内の prop の値を「コピー」したことを意味します。これにより、prop 値が予期しない変更から確実に保護されます: Vue ドキュメントで詳細を読む

これは、上記のアプローチを示す非常に簡単な例です:

/あなたの子コンポーネントvue/

リーリー

さて、あなたの例を読むと、フォーム内の一部のデータを更新しようとしていることがわかりますが、ボタンか何かで確認されない限り、初期情報を変更したくないようです。この問題を解決するプロセスは次のとおりです:

• ユーザーが変更できる初期データを prop として渡します。
• ユーザーが入力要素を介して一部のデータを変更したが、(ボタンを介して)それらの変更を確認しなかった場合、データは変更しないままにしておきます(これは、親要素に変更を加えず、プロパティ値を変更しないことを意味します)
• ユーザーが一部のデータを変更してそれを確認した場合、更新されたデータを親 (this.$emit) に送信して、親が変更を理解できるようにします。

Answer 2

そこで私は 2 つの解決策を見つけました:

リーリー ＃＃＃または＃＃＃ リーリー

どちらも機能します。フォームの値を変更しても、プロパティは変更されません。