vue自定义组件时常见的一个报错解决办法

在写vue组件时，我们会遇到这样一个警告信息：[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: "value"。

错误的原因是，父组件通过prop传值给子组件，当子组件内部该值发生变化时就会出现这个问题。我们解决办法的思路如下：

我们在父组件中传value值给子组件，然后子组件中通过prop接收，然后我们在data中重新定义一个新值value1来接收prop传过来的value，后续我们修改value1就可以了。

// 父组件传值value
<auto-customer :value="val" @change="onchange"></auto-customer>

//子组件
<el-select 
    v-model="value1" 
    placeholder="请选择" 
    clearable
    @change="onChange">
    <el-option  v-for="item in options"  :key="item" :label="item" :value="item"></el-option>
</el-select>

export default {
    props: {
      value: ''  // 子组件通过prop接收父组件
    },
    data () {
      return {
        options: [],
        value1: this.value  //关键操作用新值接收value
      }
    },
    methods: {
      onChange(val) {
        if(val) {
          this.$emit('select', val) 
        }else{
          this.value1 = "" 
          this.$emit('select', "")
        }
      }
    }
  }

但是通过实践，在选择下拉框时报错是没有了，但是父组件传新值子组件确没办法数据双向改变，所以我们需要加一个数据监听操作：

watch: {
      value: {  
        immediate: true,  
        handler: function(val) {
          var that = this
          that.value1= val;  
        }  
      } 
}

这样我们会发现控制台没有了警告，大功告成，欢迎大家指导纠错。