Vue2.0 子组件修改props中的值导致问题及报错解决

vue 父组件给子组件的prop传值报错

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: "modal1"

报错原因：props传值是单向数据流，只能由父组件传递给子组件，子组件被动接受，一旦子组件自己试图修改props中的值，就会报上述错误，这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

解决办法：
父组件可以通过this.$refs.[子组件名].[子组件的方法]来调用子组件的方法，将要接受的值放到data中，并定义一个方法来改变这个值，我们方法接收一个参数，然后我们可以通过在父组件调用这个方法来改变子组件data中的值

问题场景：

// 组件定义在 change-password文件中
<Modal v-model="modal1"
           title="修改用户密码"
           @on-ok="ok"
           @on-cancel="cancel"
           :loading="loading">
  Modal>

这是我用的UI框架iview中的模态框的定义，modal1用于做是否显示模态框的标志位，我通过父组件传值给这个模态框子组件来控制显示，像下面这样

// 子组件接收放在props 
props: {
     modal1: false
  }

然后通过父组件传值

    <change-password  :modal1="modal1">change-password>

但是由于UI框架在取消模态框时，会主动将modal1的值置为false，这样就修改了props中的值，因为这样的修改可能会影响父组件的状态，改变父组件原来的值，所以Vue会像文章一开始那样报错（在实际开发中发现在子组件中修改props中的值已经改变了父组件中的原始值），而且会有你意想不到的错误，导致程序不是你设想的运行方式，那么问题该怎么解决，我想到了可能是父组件中的值被改变了，于是乎我在子组件这样加了一行

this.$emit('cancel', false)

在方法执行完后通知父组件，我模态框取消过了，你可以变为初始值false了，然后我再父组件接收这个emit，像这样

<change-password @cancel="resetmodal1" :modal1="modal1">change-password>

在父组件调用resetmodal1这个方法来恢复初始值false
这样一来，功能可以正常使用了，但是警告却来了，就像文章一开始的那样，后来没办法，有警告会挨骂啊，不得不去找原因，在看过问题帖子后，找到了解决方法，我们可以向下面这样修改，修改原理已经在文章开始介绍了，下面直接给局部代码的实现
首先是子组件，我们将要接收的数据放在data中,并定义一个方法修改它

data(){
 return {
      modal1: false
}}，
methods:{
  isshow (flag) {
      this.modal1 = flag
    }
}

接下来我们就可以在父组件按照需要调用子组件的方法，修改这个标志为了

    <change-password ref="changepassword"
                     :currentuserId="resetUserid">change-password>
                     

在我们需要展示模态框的函数中加上下面这句，就可以实现传值了

     this.$refs.changepassword.isshow(this.modal1)

到这里我们的问题就解决了，打开控制台发现警告也消失了，到这里你就可以回过头去看看上面一开始提到的解决办法了，希望能够帮助到你