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>元素，它将加载指定的跟踪(隐藏本机控件)。因此，在现实中，它将驱动视频播放时的应用程序状态(当前时间、播放状态等)。但是，<control-panel>有一个可以指定视频状态的刷卡条和按钮(播放/暂停、查找)。显然，在其中一个组件中更改此一般状态将影响其他两个组件(映射也将根据当前时间进行)。

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

还是应该以一种全球状态传递给儿童或事件广播的方式来实现呢？在我被纠正之前，请考虑一个示例，其中有两个<player>和两个<control-panel>，它们不是分层关联的，但是一个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>捆绑在一起，我最终会使用广播或<control-panel>更新的双向currentTime。我将更新这篇文章，当我去，并将标记正确的答案或张贴我自己的，如果与任何答案不同。

更新2

下面读我的答案。我已经能够使用下面的方法成功地解决了我的问题。

Answer 1

解决方案涉及采用更新1中描述的方法。由于<video>元素对API有很好的考虑，因此将其转换为反应性组件相当容易(尽管令人厌烦)。

视频元素的包装器最终以以下方式创建了几个computed属性：

'currentTime': {
    cache: false,
    get: function () {
        return this.$els.player.currentTime;
    },
    set: function (value) {
        this.$els.player.currentTime = value;
    }
}

属性cache: false必须使用，因为属性没有绑定到反应性元素，每次查询属性时都需要重新计算。

没有使组件完全反应是有意的。也就是说，我可以将需要的属性定义为props，并假定它们可以由父级提供并与父级同步。每当<video>元素触发状态更改事件时，这些属性将在内部更新。

最后，我还使用<video>方法将$emit元素的事件传播给组件的父级。这是因为组件简单地引入了HLS并充当状态驱动程序。因此，它不能完全反应并模仿普通的<video>元素，这是可以接受的。

“控制”面板成功引用了“更新1”中所述的播放机组件。在接收到播放机的句柄后，很容易使用$on订阅它的事件，然后简单地在状态更改事件上点击它的计算属性。

最后，map更容易实现，因为它遵循了所有其他Vue示例中描述的或多或少简单的流程。在现实中，地图的父母一直在跟踪当前的时间。这个变量实际上是由使用:currentTime.sync="currentTime"属性的控制面板更新的。然而，在地图上，感觉就像父母自己在更新时间一样。

Answer 2

我认为这是一个好主意，让他们作为独立的组成部分；

然后，您可以随时与使用相同接口的其他组件切换控件面板组件。

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

$broadcasting和$dispatching工作得很好，即使存在多个播放器，只要您在每个广播/调度中传递一个标识符密钥，那么接收消息的每个组件都可以立即确定是否为它们发送了消息。