vue中子组件中传值问题

问题描述：数据列表中，点击编辑按钮，弹出弹框，如图所示，但控制台出现如下错误。

 

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders....

子组件：

<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="form">
        ...
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: 'wordModal',
      props: {
          row: {...},
          dialogFormVisible: {
              type: Boolean,
              default: false
          },
      },
      methods: {
        ...
     }
    }
</script>

在子组件中，取消按钮直接使用<el-button @click="dialogFormVisible = false">取 消</el-button>，就会提示禁止在子组件中改变父组件的值。

所以在父组件中新增cancel的方法，子组件点击取消按钮后，发送对应事件，在父组件中改变dialogFormVisible的值。

父组件：

<template>
    <word-modal
       ...
       :dialogFormVisible="dialogFormVisible"
       @closeDialog="closeDialog"
    />
</template>

<script>
    import WordModal from './wordModal.vue';
    export default {
        components: { WordModal },
        data() {
            return {
                l...
                dialogFormVisible: false,
                ...
            }
        },
        method: {
            ...
            closeDialog() {
              this.dialogFormVisible = false;
            },
        }
    }
</script>

子组件：

<template>
    ...
      <el-button @click="cancel">取 消</el-button>
    ...
</template>

<script>
export default {
  ...
  methods: {
    cancel() {
      this.$emit('closeDialog')
    },
    ...
  },

}
</script>