时间戳

首页 > 解决方案 > Vue // this.$root.$off 从全局事件中取消订阅组件的所有实例

javascript - Vue // this.$root.$off 从全局事件中取消订阅组件的所有实例

问题描述

我有一个在表单中使用的自定义输入验证组件。应用程序周围有 15 个该组件的实例。它有一个beforeDestroy方法，我triggerGlobalValidation在向服务器发送请求之前取消订阅全局事件，该事件会触发验证。正如预期的那样，它仅在此特定组件内触发一次。

有一个带有v-if参数的容器，其中包含组件的一个实例。因此，当v-if="false"我希望这个特定组件取消订阅事件并被销毁时。它很好地接受了一件事：不知何故，这个组件也从事件中取消订阅它的所有其他实例。triggerGlobalValidation

我已经测试了该行为v-show并且它按预期工作 - 所有其他实例都保持订阅，但由于该v-show字段是表单所必需的，即使没有在 DOM 中显示它也会阻止验证。我还通过删除来测试上述组件的行为this.$root.$off("triggerGlobalValidation")，它也可以按预期工作+污染全局根。

关于 $off 方法的 Vue 文档说：

如果没有提供参数，则移除所有事件监听器；

如果仅提供事件，则移除该事件的所有侦听器；

如果同时给出事件和回调，则仅删除该特定回调的侦听器。

是否有可能在回调中以某种方式提到，该$off方法不应该从事件中取消订阅它的所有实例，而只是这个特定的被销毁？

在codesandbox中查看

标签： javascriptvue.js

解决方案

正如问题中所回答的那样，您需要保存处理程序并将其再次传递给$off

mounted() {
  this.fn = () => {
    this.toggleWarning();
  }
  this.$root.$on("triggerChildComponents", this.fn);
},
beforeDestroy() {
  this.$root.$off("triggerChildComponents", this.fn);
},

推荐阅读