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