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=