初入vue:子组件接收props值并需要对这个值进行修改的解决办法

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()重新定义一个值去接收报错的这个depByOrgList,下面是我项目中的代码

props: {
    tempUserid:{
      type:String
    },
    depByOrgList:{
      type:Array,
    }
  },
  data() {
    return {
      dialogDepEdit: false,
      innerDepVisible: false,
      innerDepDeitVisible: false,
      thedepByOrgList: this.depByOrgList,
      depForm:{}
    }
  },

使用一个变量thedepByOrgList去接收,子组件就可以满足对父组件传过来的值进行操作了.

但是这样还是会存在一个问题,thedepByOrgList这个属性只会在组件被创建的时候赋一次值,后续如果depByOrgList这个props值有变化,thedepByOrgList并不会自动同步,这时候就需要引入vue的一个属性监听函数

watch:{
    depByOrgList:function(val){
      this.thedepByOrgList=val
    }
  },

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。