初入vue:サブコンポーネントがprops値を受信し、この値を修正する必要がある解決策

1316 ワード

vue:サブコンポーネントがprops値を受信し、この値を変更する必要がある解決策
最進は微信ウィジェットから回ってきたばかりで、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によって関連する状態を動的に変更できます.