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 文档说：

如果未提供任何参数，则删除所有事件侦听器；

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

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

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

在代码沙盒中查看

Answer 1

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

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