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

Question

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

有一个带有 v-if 的容器包含组件的一个实例的参数。所以当v-if="false"我希望这个特定组件取消订阅事件并被销毁。它接受一件事:不知何故，这个组件取消订阅 全部 来自 triggerGlobalValidation 的其他实例事件也是如此。

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

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

If no arguments are provided, remove all event listeners;

If only the event is provided, remove all listeners for that event;

If both event and callback are given, remove the listener for that specific callback only.

是否有可能在回调中以某种方式提到这个 $off方法不应取消订阅 全部 事件中的实例，但仅此 某些 一个被摧毁？

查看 codesandbox

Answer 1

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

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