javascript - VueJS 连接不相关的(如在父/子中)组件

Question

我正在探索 vue.js，对如何解决某个问题有疑问。

我的根组件有以下模板:

<div class="container">
    <div class="stage">
        <map :current-time="currentTime" :recording="recording"></map>
        <player :track="track" :current-time="currentTime"></player>
    </div>
    <control-panel :current-time="currentTime"></control-panel>
</div>

基本上，<player>组件有 <video>里面的元素将加载指定的轨道(隐藏 native 控件)。因此，它实际上会在视频播放时驱动应用程序的状态(当前时间、播放状态等)。然而，<control-panel>具有指示视频状态(播放/暂停、搜索)的滑动条和按钮。显然，改变其中一个组件的一般状态会影响其他两个组件( map 也会根据当前时间进行处理)。

但是，我想知道这是否更有意义，Vue 是否支持提供对组件的引用以便我可以提供 <control-panel>引用<player>这样它就可以直接从中获取状态更改。

或者这应该以一种全局状态传递给 child 或事件广播的方式来完成？在纠正我之前，请考虑一个示例，其中有两个 <player> s和两个<control-panel> s 没有层次关系，但一个 panelA 与 playerA 一起工作，而 panelB 与 playerB 一起工作。在这种情况下，我认为广播选项不可行，对吗？

欢迎任何建议，特别是因为我刚刚学习 Vue。

更新1

因此，在更加熟悉 Vue 并听取社区的反馈后，我想我想出了一个聪明的同步解决方案 <player>和 <control-panel>一起。我的标记更改如下:

<div class="container">
    <div class="stage">
        <map :current-time="currentTime" :recording="recording"></map>
        <player :track="track" :current-time="currentTime" v-ref:player></player>
    </div>
    <control-panel :current-time="currentTime" v-ref:player-controls :player="$refs.player"></control-panel>
</div>

注意添加 v-ref <player> 的属性和 <control-panel>以及:player="$refs.player"属性在后者。这使我能够在逻辑上将一个与另一个联系在一起。在我看来，控制面板知道它在控制谁或什么是有意义的。我将进一步测试它，但就目前而言，这似乎有效。

至于捆绑<map> , 我最终会使用广播或简单的双向 currentTime由 <control-panel> 更新.我会随时更新这篇文章，如果与任何答案不同，我会标记正确答案或发布我自己的答案。

更新2

阅读下面我的回答。我已经能够使用以下方法成功解决我的问题。

Answer 1

我认为将它们作为独立的组件保留是个好主意；

然后您可以随时切换控制面板组件，使用另一个使用相同界面

(就像在电子商务应用程序中将 Stripe 换成其他支付处理器一样)

$broadcasting 和 $dispatching 即使有多个玩家在场也能很好地工作，只要你在每个广播/调度中传递一个标识符键，这样每个接收到的组件消息可以立即确定是否是为他们发送的。