关于props的问题

Question

用element做了个对话框，控制对话框弹出的visible.sync属性值由props接收父组件传来的值，一开始功能正常，但是在点击关闭对话框的时候会产生警告，原因是elemen自带的关闭按钮操作了props，遂改变方法使用变量替代props，但是发现无法正常切换，求解答

<template>
  <el-dialog title="收货地址" :visible.sync="visible">
  <el-table :data="gridData">
    <el-table-column property="date" label="操作时间"></el-table-column>
    <el-table-column property="name" label="操作人"></el-table-column>
    <el-table-column property="detail" label="操作内容"></el-table-column>  
  </el-table></el-dialog></template><script>
  export default{    props:['dialogTableVisible','gridData'],
    data(){      return {        visible:this.dialogTableVisible
      }
    }
  }</script>

Answer 1

控制组件显示的还是用父组件中传的参数<el-dialog&nbsp;title="收货地址"&nbsp;:visible.sync="dialogTableVisible">监听一个它的关闭事件<el-dialog&nbsp;title="收货地址"&nbsp;:visible.sync="dialogTableVisible"&nbsp;@close="handleClose">methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;handleClose(value){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$emit('close',&nbsp;value); &nbsp;&nbsp;&nbsp;&nbsp;} }父组件中再监听子组件emit出来的close事件<child&nbsp;@close="handleClose"&nbsp;:dialogTableVisible="dialogTableVisible"&nbsp;/> methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;handleClose(value){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(value);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;在这里修改&nbsp;dialogTableVisible&nbsp;的值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dialogTableVisible&nbsp;=&nbsp;value; &nbsp;&nbsp;&nbsp;&nbsp;} }