初入vue:サブコンポーネントがprops値を受信し、この値を修正する必要がある解決策
1316 ワード
vue:サブコンポーネントがprops値を受信し、この値を変更する必要がある解決策
最進は微信ウィジェットから回ってきたばかりで、vueはそれと大きな類似点があることが分かったが、それに比べてvueは確かに便利になった(特にvueの#双方向バインド)、コンポーネントに対してはvue側が親コンポーネントに対する子コンポーネントの値の修正を制限した.最初は、サブコンポーネントが親コンポーネントから直接送られてきたpropsを変更すると、警告が表示されます.
この場合、サブコンポーネントdata()でエラーを受信するための値を再定義する必要があります.次は私のプロジェクトのコードです.
1つの変数
しかし、
watchの役割は、値の変換を監視し、変化のために実行する必要がある方法を呼び出すことができる.watchによって関連する状態を動的に変更できます.
最進は微信ウィジェットから回ってきたばかりで、vueはそれと大きな類似点があることが分かったが、それに比べてvueは確かに便利になった(特にvueの#双方向バインド)、コンポーネントに対してはvue側が親コンポーネントに対する子コンポーネントの値の修正を制限した.最初は、サブコンポーネントが親コンポーネントから直接送られてきたpropsを変更すると、警告が表示されます.
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "depByOrgList"
この場合、サブコンポーネントdata()でエラーを受信するための値を再定義する必要があります.次は私のプロジェクトのコードです.
props: {
tempUserid:{
type:String
},
depByOrgList:{
type:Array,
}
},
data() {
return {
dialogDepEdit: false,
innerDepVisible: false,
innerDepDeitVisible: false,
thedepByOrgList: this.depByOrgList,
depForm:{}
}
},
1つの変数
depByOrgList
を用いる受信すると、サブアセンブリは、親アセンブリからの値を満たす操作を行うことができる.しかし、
thedepByOrgList
という属性はコンポーネントが作成されたときに一度だけ値を付与し、その後、thedepByOrgList
というprops値が変化した場合、depByOrgList
は自動的に同期しないため、vueの属性傍受関数を導入する必要があるという問題があります.watch:{
depByOrgList:function(val){
this.thedepByOrgList=val
}
},
watchの役割は、値の変換を監視し、変化のために実行する必要がある方法を呼び出すことができる.watchによって関連する状態を動的に変更できます.