Vue中vue-youtube-embed嵌套组件视频播放时暂停其他视频方案咨询

方案1：父组件作为调度中心（最适合当前场景，无需额外依赖） #

你当前只有2个视频子组件，用父组件中转是成本最低的方案，逻辑也最清晰。

步骤1：修改父组件代码

给两个子组件加唯一ref，同时监听子组件抛出的播放事件：

<template>
  <div>
    <main class="main-content" id="main-content" tabindex="-1">
      <ResponsibilityByTheNumbers 
        is-video-component="true" 
        :text="handsOnText"
        ref="videoCompA"
        @video-play="pauseOtherVideo('videoCompB')"
      />   
      <ResponsibilityWhiteBandLeftText 
        is-video-component="true" 
        :showPrism="showPrism"
        :text="stemVideoBandText"
        ref="videoCompB"
        @video-play="pauseOtherVideo('videoCompA')"
      />
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    pauseOtherVideo(targetCompRef) {
      // 调用目标子组件暴露的暂停方法
      this.$refs[targetCompRef]?.pauseVideo()
    }
  }
}
</script>

步骤2：修改两个视频子组件的代码

首先子组件内部监听youtube组件的播放事件，向外抛给父组件，同时对外暴露暂停自身视频的方法：

<!-- 子组件内的youtube组件 -->
<youtube 
  video-id="0md0uT_wg7g" 
  @playing="handlePlay"
  ref="innerPlayer"
></youtube>

<script>
export default {
  methods: {
    handlePlay() {
      // 播放时通知父组件
      this.$emit('video-play')
    },
    // 对外暴露的暂停方法
    pauseVideo() {
      this.$refs.innerPlayer?.player.stopVideo()
    }
  }
}
</script>

如果是Vue3项目，需要用defineExpose({ pauseVideo })把暂停方法暴露给父组件才能调用

常见问题解答 #

• 能不能直接访问兄弟组件的$ref？
  不行，Vue的$ref是组件内部作用域的，兄弟组件无法直接互相访问。就算通过this.$parent.$refs.xxx的方式强行拿到，也会导致组件高度耦合，只要父组件结构稍有调整就会完全失效，非常不推荐。
• 使用Store是不是更优的方案？
  如果你的项目里只有这两个视频需要联动控制，引入Pinia/Vuex反而增加冗余代码，父组件调度是最优解。如果你的全项目多处都有视频播放互斥的需求，用Store统一管理当前播放ID是更合适的方案：Store中存储当前播放的视频唯一标识，所有视频组件播放时更新Store中的ID，同时监听这个ID变化，当ID不等于自身ID时自动暂停即可。

内容的提问来源于stack exchange，提问作者hendy0817