# 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)

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