VueJS连接不相关的(如父/子）组件

VueJS connect unrelated (as in parent/child) components

本文关键字：组件 如父 连接 不相关 VueJS      更新时间：2023-09-26

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

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

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

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

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

$broadcasting和$dispatching即使有多个参与者在场，也能很好地工作，只要您在每次广播/调度时传递一个标识符密钥，以便接收消息的每个组件都能立即确定消息是否是为他们发送的。

解决方案采用更新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>元素触发状态更改事件时，这些属性都会在内部更新。

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

控制面板成功引用了更新1中指定的播放器组件。在收到播放器的句柄后，可以很容易地用$on订阅其事件，然后在状态更改事件时简单地点击其计算属性。

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

相关文章：