vue Avoid mutating a prop directly since the value will be overwritten whenever the parent component

在使用vue 时报错：
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: “XXX”
报错原因是父组件通过props 传参给子组件，子组件又通过$emit的方式更新父组件中对应Prop绑定的参数，违背了数据传输单向流动原则。正确的写法应该是父组件通过this.$refs.XXX.XXX()的方式让子组件执行对应方法。
如在列子中父组件需要控制打开和关闭子组件中的dialog，应该做如下处理：

//子组件
<template>
    <el-dialog
     title="dialog"
    :visible.sync="visible"
    width="500">
    </el-dialog>
</template>

<script>
    export default {
      name: "list_form",
      data(){
        return{
            visible :false
        }
      },
      methods:{
        open(){
          this.visible = true
        }
      }
    }
</script>

<style scoped>

</style>

//父组件
<template>
<div>
  <div>
    <el-button type="primary" size="mini" @click="openFun">新增</el-button>
  </div>
  <el-table :data="list">
  </el-table>
  <list_form  ref="listForm"/>
</div>
</template>

<script>
  import List_form from "@/views/computer/list_form";
    export default {
      name: "list",
      components: {List_form},
      data(){
        return {
          list:[],
          former:{
            visible:false
          },
        }
      },
      methods:{
        openFun(){
            this.$refs.listForm.open()
        }
      }
    }
</script>
<style scoped>

</style>