vue父子组件中有emit防重复点击不生效 ?

Question

Vue父子组件中子组件使用emit防重点击未生效

使用场景

• 父组件 插入子组件选中的数据 渲染选中数据表格
• 子组件 渲染一个数据表格 勾选数据后点击确定按钮 父组件接收选中数据渲染选中数据到父组件的表格中

子组件点击确定按钮已加loading防重复点击 但是未生效

• 父组件代码

  <children @add="add" ref="children" />
  
  
  //js
  add(list) {
    // ..... 类似于遍历数据push进表格data的一些操作
    this.$refs.children.close()
  }

• 子组件代码

  <a-modal :visible="visible" title="子组件" @cancel="visible = false" :footer="null">
    // 一些表格 选中数据为selectedRows
    <a-button :loading="confirmLoading" @click="confirm">确定</a-button>
  </a-modal>
  
  data() {
    return {
        confirmLoading: false,
        selectedRows: [],
    }
  },
  methods: {
    confirm() {
        if (this.confirmLoading) return
        this.confirmLoading = true
        this.$emit('add', this.selectedRows)
        this.confirmLoading = false
    },
    close() {
        this.visible = false
    },
  }

结果点击事件被出发了多次。。。。。
（confirmLoading设置为false在emit事件前后、父子组件中都试了 没有拦住重复点击）

该咋整啊 。。。。。

Answer 1

methods: {
  confirm() {
      if (this.confirmLoading) return
      this.confirmLoading = true
      this.$emit('add', this.selectedRows)
      this.$nextTick(() => {
        this.confirmLoading = false
      })
  },
  close() {
      this.visible = false
  },
}

Answer 2

加个setTimeout试试:

 confirm() {
      if (this.confirmLoading) return
      this.confirmLoading = true
      this.$emit('add', this.selectedRows)
      setTimeout(() => {
this.confirmLoading = false}, 0)
  },