Question

假设我有一个这样的组件树：

<widget>
  <widget-header>
    <panel-toggle></panel-toggle>
  </widget-header>
  <widget-body>
    <panel></panel>
  </widget-body>
</widget>

现在我想我希望panel-toggle组件能够切换panel组件的可见性。我可以让它影响从widget传递到每个组件的道具，但这似乎不是最佳解决方案。我尝试使用this.$emit(eventName)发送事件，但该事件仅由发出事件的元素的直接父级接收。在这种情况下，这将是panel-toggle发出事件，只有widget-header能够接收它。我尝试使用this.$root.$emit(eventName)在根元素中发送事件并使用this.$root.$on(eventName)将其选中，然后由所有widget组件拾取它，这是不行的。我最后做的是使用this.$parent.$parent.$emit(eventName)发送活动，然后使用panel从this.$parent.$parent.$on(eventName)提取活动。虽然这有效，但似乎不是正确的方法。

仅使用Vue在组件widget内的组件之间实现此通信的正确方法是什么？答案是否与ref功能有关？

Answer 1

由于您（并且有充分理由）关注全局事件总线的全局性，因此解决方案是本地化事件总线。在父级中创建数据项：

else

并将其传递给每个孩子作为道具。现在他们只为他们两个人建立了一个私人通信渠道。

如何在某个组件内的组件之间进行通信？

1 个答案: