解决props数据传递时报错问题

最新推荐文章于 2024-04-15 08:52:43 发布

原创最新推荐文章于 2024-04-15 08:52:43 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

19 篇文章

订阅专栏

在Vue 2.x中，props数据传递是单向的，导致子组件无法直接修改父组件状态，从而引发报错。为了解耦合，Vue 1.x的.sync修饰符支持双向绑定。在Vue 2.x中，可以将父组件传递的prop值保存到子组件的data内，以避免直接操作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: "dialogFormVisible"

出现错误的原因是：在Vue 2.x 通过 props 传递数据都是单向的，也就是说父组件数据变化时会传递给子组件，但是反过来就不行了（比如在子组件中修改 props 数据时就会报出上述错误）。

在 Vue 1.x 里提供了 .sync 修饰符来支持双向绑定，这样设计的目的是将父子组件解耦，避免子组件中无意修改父组件的状态。

但是，问题来了，如何才能实现父组件传递给子组件值，子组件也可以修改呢？

这个时候，我们可以认为，当父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据，引用父组件的 prop，代码实现如下：

//父组件
<template>
	<div>
       <add-user :dialog-form-visible='true'></add-user>
    </div>
</template>
<script>
import addUser from '../UserMana/AddUser'
export default {
components: { //子组件注册
    addUser,
  }
}
</script>

//子组件
//为了实现组件复用，我将弹出框封装为一个组件
<template>
  <div class="addUser">
    <el-dialog title="收货地址" :visible.sync="dialog">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['dialogFormVisible'], //父组件传递给子组件的数据
  watch: {
  	// 这一步很关键，此时在父组件修改了组件的props，会同步到组件内对应的props上
  	// 但是不会同步到你刚刚在data对象中创建的 dialog 上
  	// 所以需要再创建一个针对props属性dialogFormVisible的watch（监听）
  	// 当props修改后对应data中的副本dialog 也要同步数据。
    dialogFormVisible(val){
      this.dialog = val
    }
  },
  data() {
    return {
    //子组件内部声明变量，在组件初始化时获取来自父组件的 dialogFormVisible
    // 我们只需要在子组件内部维护 dialog ，可以避免直接操作 dialogFormVisible
      dialog: this.dialogFormVisible,
      form: {
        name: ""
      }
    };
  },
  }
  </script>

这样可以解决在子组件中使用自己 data 对象创建的数据来修改，避免直接操作父组件传递过来的数据。

亲测有效，如果还有大佬有其它更好意见，不吝赐教。