Vue中如何在v-for循环内触发所有组件的指定方法——实现音频播放器互斥播放功能

嘿，这个需求其实用Vue自带的特性就能轻松实现，完全不用第三方包！我给你两种可行的方案，你可以根据自己的场景选～

方案一：父组件通过Ref管理子组件实例，直接调用暂停方法 #

这个思路很直接：父组件通过ref收集所有AudioPlayer的实例，当某个播放器触发播放事件时，遍历所有实例并让非当前播放器执行暂停。

步骤1：修改父组件代码 #

首先，给循环渲染的AudioPlayer添加ref，并在播放事件中传递当前歌曲的ID，方便区分哪个是正在播放的组件：

<template>
  <AudioPlayer 
    v-for="song in songs" 
    :key="song.id" 
    :song-id="song.id"  <!-- 把歌曲ID传给子组件 -->
    ref="players"       <!-- 收集子组件实例 -->
    @play="(id) => pauseOthers(id)" 
  />
</template>
<script>
import { defineComponent, ref } from 'vue';
import AudioPlayer from '@/components/AudioPlayer.vue';
export default defineComponent({
  setup(){
    const songs = ref([{id: "song1"},{id: "song2"}]);
    const players = ref([]); // 存储所有子组件实例的数组

    const pauseOthers = (currentSongId) => {
      // 遍历所有播放器实例
      players.value.forEach(player => {
        // 排除当前播放的组件，调用其他组件的pause方法
        if (player.songId !== currentSongId) {
          player.pause();
        }
      });
    }

    return { songs, pauseOthers, players }
  }
})
</script>

步骤2：修改子组件代码 #

子组件需要接收songId作为Prop，并把它暴露给父组件，同时在播放时触发父组件的play事件：

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    songId: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const pause = () => {
      console.log("Paused!");
      // 这里可以添加实际的音频暂停逻辑，比如操作audio元素：audioRef.value.pause()
    };

    const handlePlay = () => {
      // 触发父组件的play事件，传递当前歌曲ID
      emit('play', props.songId);
      // 这里添加实际的音频播放逻辑
    };

    // 把songId和pause方法暴露给父组件
    return { pause, songId: props.songId, handlePlay };
  }
})
</script>

注意：子组件的模板里需要把点击事件绑定到handlePlay，比如<div @click="handlePlay">播放按钮</div>。

方案二：用Provide/Inject实现响应式通信（更推荐） #

这个方案更符合Vue的响应式思想，父子组件解耦，不需要父组件直接操作子组件实例，而是通过共享状态来触发自动暂停。

步骤1：父组件提供共享状态和方法 #

父组件维护一个playingSongId的响应式变量，用来记录当前正在播放的歌曲ID，同时提供一个通知播放的方法：

<template>
  <AudioPlayer 
    v-for="song in songs" 
    :key="song.id" 
    :song-id="song.id" 
  />
</template>
<script>
import { defineComponent, ref, provide } from 'vue';
import AudioPlayer from '@/components/AudioPlayer.vue';
export default defineComponent({
  setup(){
    const songs = ref([{id: "song1"},{id: "song2"}]);
    const playingSongId = ref(null); // 当前正在播放的歌曲ID

    // 提供给子组件的方法：通知父组件当前播放的歌曲ID
    const notifyPlay = (songId) => {
      playingSongId.value = songId;
    };

    // 把状态和方法注入给所有子组件
    provide('playingSongId', playingSongId);
    provide('notifyPlay', notifyPlay);

    return { songs }
  }
})
</script>

步骤2：子组件注入并监听状态变化 #

子组件注入父组件提供的状态和方法，当自己播放时通知父组件，同时监听playingSongId的变化，如果当前播放的不是自己，就自动暂停：

<script>
import { defineComponent, inject, watch, ref } from 'vue';
export default defineComponent({
  props: {
    songId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const isPlaying = ref(false);
    // 注入父组件的状态和方法
    const playingSongId = inject('playingSongId');
    const notifyPlay = inject('notifyPlay');

    const play = () => {
      isPlaying.value = true;
      notifyPlay(props.songId); // 通知父组件自己开始播放
      // 这里添加实际的音频播放逻辑
    };

    const pause = () => {
      isPlaying.value = false;
      console.log("Paused!");
      // 这里添加实际的音频暂停逻辑
    };

    // 监听当前播放的歌曲ID变化，自动暂停非当前组件
    watch(playingSongId, (newPlayingId) => {
      if (newPlayingId !== props.songId && isPlaying.value) {
        pause();
      }
    });

    return { play, pause };
  }
})
</script>

同样，子组件模板里需要把点击事件绑定到play方法。

这两种方案都能实现你的需求，方案二更优雅，因为它利用Vue的响应式系统，组件之间的耦合度更低。如果你的播放器逻辑比较复杂，方案二的扩展性会更好。

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