Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

706 ワード

Vueエラー記録
原因分析:これは親子コンポーネントの値伝達時報の間違いで、まずコードを見てみましょう:親コンポーネント:子コンポーネント:props: { loading: { type: Boolean, default: false } },親コンポーネントは:loading方式で値を伝達し、子コンポーネントpropsは受信し、そこでこの値を使用します.エラーの原因:Vueは単一のデータストリームを使用し、サブコンポーネントが親コンポーネントの値を変更しないようにするために、サブコンポーネントは親コンポーネントの値を受信した後、自分のdataまたはcomputedに変数を定義してこの値を使用する必要があります.公式引用:
すべてのpropは、親子propの間に一方向の下りバインドを形成します.親propの更新はサブコンポーネントに下に流れますが、逆にはできません.これにより、サブコンポーネントから親コンポーネントの状態が意外に変更されることを防止し、アプリケーションのデータの流れが理解しにくくなります.
公式Props説明:Prop
修正後のコード(サブコンポーネントのみ修正すればよい):dataに追加:data() { return { vanloading: this.loading, }; }サブコンポーネントにvanloadingを参照すればエラーは報告されません.