Javascript VueJS连接不相关（如在父/子组件中）组件

我正在探索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>

基本上，

组件内部有

元素，该元素将加载指定的轨迹（隐藏本机控件）。因此，它实际上会在视频播放时驱动应用程序的状态（当前时间、播放状态等）。但是，

有一个滑动条和按钮，用于指示视频状态（播放/暂停、搜索）。显然，在其中一个组件中更改此常规状态将影响其他两个组件（映射也将根据当前时间进行）

但是，我想知道这是否更有意义，Vue是否支持提供对组件的引用，以便我可以提供对

的引用，以便它可以直接从中获取状态更改

还是应该以一种传递给儿童的全球状态或事件广播的方式来实现？在纠正之前，请考虑一个例子，其中有两个“代码> >代码> s和两个<代码> <代码> s，它们不是层次相关的，但一个PANELLA与PrReRB和PANELB一起工作。在这种情况下，我认为广播选项会从桌子上掉下来，对吗

欢迎提出任何建议，特别是因为我正在学习Vue

更新1 因此，在更加熟悉Vue并听取社区反馈后，我想我已经想出了一个聪明的解决方案，可以将

和

同步在一起。我的标记更改为以下内容：

<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=“$refs.player”

属性。这使我能够在逻辑上把它们联系在一起。在我看来，控制面板知道它在控制谁或控制什么是有意义的。我将进一步测试它，但目前看来，这似乎是可行的

至于将

捆绑在一起，我将使用广播或简单的双向

currentTime

，由

更新。我会在我去的时候更新这篇文章，并且会标记正确的答案或者发布我自己的，如果与任何答案不同的话

更新2

---

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

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

然后，您可以随时关闭控制面板组件，只要您想使用另一个使用相同界面的组件

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

---

$broadcasting

和

$dispatching

即使有多个播放机在场，也能很好地工作，只要您在每次广播/分派时传递一个标识符键，以便接收消息的每个组件都能立即确定消息是否是为他们发送的。

解决方案采用中所述的方法更新1。因为

元素有一个经过深思熟虑的API，所以将其转换为反应式组件相当容易（尽管很烦人）

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

计算的

属性：

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

必须使用Property

cache:false

，因为该属性未绑定到被动元素，每次查询该属性时都需要重新计算

不使部件完全反应是故意的。也就是说，我可以将所需的属性定义为

props

，假设它们可以由父级提供并与父级同步。只要

元素触发状态更改事件，这些属性就会在内部更新

我还使用

$emit

方法将

元素的事件传播到组件的父级。之所以这样做，是因为组件只是引入了HLS并充当了状态驱动程序。因此，它不完全反应并模仿普通的

元素是可以接受的

控制面板成功引用了更新1中所述的播放器组件。在收到播放器的句柄后，可以很容易地使用

$on

订阅其事件，然后在状态更改事件中简单地点击其计算属性

---

最后，map更容易实现，因为它遵循了所有其他Vue示例中描述的或多或少的简单流程。实际上，map的父对象跟踪当前时间。此变量实际上是由控制面板使用

：currentTime.sync=“currentTime”

属性更新的。然而，对于地图来说，它感觉就像父母自己在更新时间一样。

$broadcasting

和

$dispatching

仍然可以通过

道具将id传递给组件来处理多个玩家。这种方法的问题是，玩家和控件需要id才能运行。但是，它们是潜在的独立组件。如果我以这种方式实现它们，那么生成一个播放器组件将需要父级为其提供一个id（因为该id必须同时提供给它们，以便它们知道要过滤哪些消息）。这通常是所有MVVM框架的问题吗？我的意思是，我喜欢我可以做这个动态绑定之类的事情，但有时候，我需要完全手动控制，而且混合Vue或使用普通JS似乎不是那么简单。我仍然在解决这个问题。我可能会使用
$broadcasting
进行
map
-
video
时间同步，但我想我已经想出了一个聪明的方法来同步
video
和
控件。我正在用更改更新我的问题。