Vue中$emit调用父组件异步方法模拟.then实现方式
作者：果粒橙er
这篇文章主要介绍了Vue中$emit调用父组件异步方法模拟.then实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
$emit调用父组件异步方法模拟.then实现
需求
有一个封装好的弹窗子组件，点确认时$emit父组件删除方法，父组件删除接口调用成功后需要调用子组件close()方法。
- 方法：1可以直接$refs.dialog.close()关闭弹窗
- 方法2：可以模拟.then在子组件实现这一逻辑
父组件事件：
delConfirm(params, callback) {
// reqName是请求名
reqName(params).then(res => {
if (res.success) {
this.$message.success('删除成功！')
callback() // 回调子组件关闭弹窗
this.getList() // 删除一条后刷新列表
}
})
},
子组件确认按钮事件：
confirm() {
// params是携带的参数 传给父组件 callback后回调的内容是close()方法
this.$emit('delConfirm', this.params, () => {
this.close()
})
}
$emit调用父组件异步方法，返回结果后再执行子组件的方法
现象
子组件请求父组件的方法，触发数据更新，待数据返回后，才能进行后续的操作
解决
使用回调函数的方式
父组件：
async getTaskListDetails(callback = () => {}) {
const { pageSize, currentPage } = this.pagination
const [res, err] = await taskListDetails({
limit: pageSize,
start: pageSize * (currentPage - 1)
})
if (err) return this.$message.error(err?.msg || '请求失败')
if (res.code !== 200) return this.$message.error(res?.msg || '请求失败')
this.dataList = res?.data?.list || []
this.mainTask = res.data.main_task
this.pagination.total = res.data.count
callback(this.dataList)
}子组件：
this.$emit('updateList', (res) => {
this.checkTaskProgress(res)
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。