element组件 dialog 中form表单不能清除成功

用v-if的方法来渲染dialog子组件

1.dialog绑一个close事件，点 x 按钮调close函数

2.点取消调一次close函数

3.点保存保存成功后调一次close函数

父组件:

<template>
  <div class="list">
    <el-button @click="clickEdit">edit</el-button>
    <Edit v-if="showEdit" :id="editId"></Edit>
  </div>
</template>
<script>
import Edit from '../components/Edit'
export default(){
  components:{Edit},
  data(){
    return{
      showEdit:false,
      editId:null,
    }
  },
  methods:{
    clickEdit(){this.showEdit=true}
    closeEdit(){this.showEdit=false}
  }
}
</script>

子组件：Edit.vue

<template>
  <div class="edit">
    <el-dialog @close="close">
      <el-form :model="form"></el-form>
      <el-button @click="close">取消</el-button>
      <el-button @click="submit">保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default(){
  props:{id:null}
  data(){
    return{
      form:{}
    }
  },
  methods:{
    close(){
      this.$refs.form.resetFields()
      this.$emit('closeEdit')
    },
    submit(){
      this.close()
    }
  }
}
</script>