Vue 2 - プロップの変更に関する警告

Question

https://laracasts.com/series/learning-vue-step-by-step シリーズを開始しました。次のエラーが発生して、Vue、Laravel、AJAX クラスを停止しました:

vue.js:2574 [Vue の警告]: 親コンポーネントが再レンダリングされるたびに値が上書きされるため、props を直接変更しないでください。代わりに、プロパティの値に基づいてデータまたは計算されたプロパティを使用します。小道具の変更: "list" (コンポーネント内にあります)

このコードは main.js

にあります リーリー

リスト プロパティをオーバーライドするときに問題が created() にあることはわかっていますが、Vue を初めて使用するため、問題を修正する方法がまったくわかりません。誰かがそれを修正する方法（そしてその理由を説明してください）を知っていますか？

Answer 1

Vue モードは、props がダウン、events がアップです。簡単そうに聞こえますが、カスタム コンポーネントを作成するときに忘れがちです。

Vue 2.2.0 以降では、v -model ( 計算されたプロパティ を使用) を使用できます。この組み合わせにより、コンポーネント間にシンプルでクリーンで一貫したインターフェイスが作成されることがわかりました:

• コンポーネントに渡された props は応答性を維持します (つまり、コンポーネントは複製されず、変更が検出されたときにローカル コピーを更新するために watch 関数も必要ありません)。 。
• 変更は自動的に親に送信されます。
• 複数レベルのコンポーネントで使用できます。

計算されたプロパティを使用すると、セッターとゲッターを個別に定義できます。これにより、Task コンポーネントを次のように書き換えることができます:

リーリー

model プロパティは、関連付けられた prop と v-model、および変更時にどのイベントが発行されるかを定義します。次に、次のように親コンポーネントからこのコンポーネントを呼び出すことができます:

リーリー

listLocal 計算プロパティは、コンポーネント内で単純なゲッターおよびセッター インターフェイスを提供します (プライベート変数と考えてください)。 #task-template では、listLocal をレンダリングでき、リアクティブなままになります (つまり、parentList が変更されると、Task コンポーネントが更新されます)。 。また、セッター (例: this.listLocal = newList) を呼び出して listLocal を変更することもできます。これにより、変更が親に送信されます。

このパターンの利点は、listLocal を Task の子コンポーネント (v-model を使用) に渡して、子コンポーネント コンテンツは最上位コンポーネントに伝播されます。

たとえば、タスク データに何らかの変更を加える別の EditTask コンポーネントがあるとします。同じ v-model と計算されたプロパティ パターンを使用することで、(v-model を使用して) listLocal をコンポーネントに渡すことができます。 リーリー

EditTask

が変更を発行すると、listLocal で set() が適切に呼び出され、それによってイベントが最上位に伝播されます。同様に、EditTask コンポーネントも v-model を使用して他のサブコンポーネント (フォーム要素など) を呼び出すことができます。

Answer 2

これは、プロップをローカルで変更することが Vue 2 ではアンチパターンとみなされているという事実と関係があります。

プロパティをローカルで変更したい場合は、初期値として props code> value を使用して data でフィールドを宣言し、コピーを変更します。

リーリー

詳しくは、Vue.js 公式ガイドをご覧ください。

---

注 1: prop と data には を使用しないでください。 ＃ ＃＃、今すぐ：＃＃＃ リーリー 使用相同的名称> 注 2: props と

reactivity

については いくつかの混乱があると思うので、# を参照することをお勧めします。 ##この スレッド