Vue中$emit调用父组件异步方法模拟.then实现

果粒橙er

已于 2023-06-08 13:52:12 修改

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

于 2023-03-20 11:07:02 首次发布

本文链接：https://blog.csdn.net/misschengispink/article/details/129663303

版权

文章讲述了在前端开发中，如何使用封装好的弹窗子组件进行操作确认。当点击子组件的确认按钮时，通过$emit触发父组件的删除方法，父组件在删除接口调用成功后，回调子组件的close()方法来关闭弹窗，并刷新列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：有一个封装好的弹窗子组件，点确认时$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()
      })
    }