Vue实现关闭对话框后刷新列表

Vue实现关闭对话框后刷新列表

有些场景需要实现用户弹窗确定后自动刷新列表，父窗口绑定fevent即可

父窗口代码

<template>
 	<div>
 <el-button @click="$refs.editform.dialogFormVisible = true" >编辑用户</el-button>
 <editform  @fevent="update_table" ref="editform">
 </editform>
 	</div>
 </template>

<script>
import editform from './editform.vue'
export default {
  components: {
    editform
  },
  methods: {
    update_table () {
      console.log('列表框被刷新了')
    }
  }
}
</script>

子窗口代码

<template>
   	<el-dialog title="编辑用户"  :visible.sync="dialogFormVisible">
   		<el-button @click="delete_user">删除用户</el-button>
	</el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    delete_user () {
     	this.$emit('fevent')
     	this.$message.success('删除成功')
     	this.dialogFormVisible = false
    }
  }
}
</script>

附加上自己的业务代码，即可实现列表自动刷新