Vue $emit 在动态组件 /promise 上无法正常工作答案

【问题标题】：Vue $emit not works properly on dynamic component /promiseVue $emit 在动态组件 /promise 上无法正常工作
【发布时间】：2021-03-21 01:02:20
【问题描述】：

我创建了一个接受动态数据（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.js vuejs2 emit vue-dynamic-components

【解决方案1】：

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

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

并像这样调用该 emit （尽管它应该可以正常工作）：

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

您还可以以通用方式定义它们并在您想要的组件中使用它们： https://vuejs.org/v2/guide/custom-directive.html

【讨论】：

感谢您的回复。中的动态组件可以是任何东西。这意味着@update-loading-status 不是它监听的唯一事件。我需要一个通用结构
所以使用自定义指令：vuejs.org/v2/guide/custom-directive.html你可以用通用的方式定义它们，并在你想要的组件中使用它们。