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

  • Z时代
  • 2024-03-11
  • 分类：IT

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事件前后、父子组件中都试了 没有拦住重复点击）

该咋整啊 。。。。。

回答：

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

回答：

加个setTimeout试试:

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

以上是 vue父子组件中有emit防重复点击不生效 ? 的全部内容， 来源链接： utcz.com/p/934549.html

回到顶部