时间戳

首页 > 解决方案 > Vue $emit 在动态组件 /promise 上无法正常工作

vue.js - Vue $emit 在动态组件 /promise 上无法正常工作

问题描述

我创建了一个接受动态数据（th、tr、td、...）的表组件。表数据（td）可以是一个动态组件，如下所示：

<td>
  <component
    :is="data.content"
    :colspan="data.colspan"
    v-bind="data.props"
    v-on="data.events"/>
</td>
...
export default {
 name: "DynamicTable",
 props: {
  ...
  isLoading : { // loading slot will be used if true
  type: Boolean,
  default: false
  }
 }
}

我在另一个组件中提供所需的数据，如下所示：

<other-html-elements/>
<dynamic-table
  :table-heads="tableHeads"
  :table-rows="tableRows"
  :is-loading="isLoading">
...
computed: { ...
tableRows () {...
 new TableData(CancelOrderButton, 'component', {
     props: {
       order
     },
     events: {
       'updateLoadingStatus': this.updateLoadingStatus
     }
   })
...
methods: { ...
updateLoadingStatus (status) {
  this.isLoading = status
}

这是我的 CancelOrderButton：

methods: {
 cancelOrder () {
  this.$emit('updateLoadingStatus', true)
  somePromise().finally(() => {
    this.$emit('updateLoadingStatus', false)
    })

一旦我点击一个按钮并调用 cancelOrder 方法，updateLoadingStatus 将毫无问题地发出。在 promise 解决后，它会再次发出。但处理程序不会触发。我已经检查了一切。我确定会发出事件。当我将第二个 emit 语句移出 finally 块或者如果我不将 isLoading 作为动态表的道具传递时，这个问题将得到解决。

标签： vue.jsvuejs2emitvue-dynamic-components

解决方案

尝试像这样设置该发射的道具：

<dynamic-table
  :table-heads="tableHeads"
  :table-rows="tableRows"
  @update-loading-status="updateLoadingStatus"
  :is-loading="isLoading">

并像这样调用它（尽管它应该像你拥有的那样工作）：

this.$emit('update-loading-status', true)

您也可以以一般方式定义它们并在所需的组件中使用它们： https ://vuejs.org/v2/guide/custom-directive.html

推荐阅读