Estoy usando este complemento https://www.npmjs.com/package/vue-youtube-embed para crear dos videos en una página en una aplicación vue que estoy creando. Lo que estoy tratando de hacer es cuando reproduzco un video, pausa el otro. Pude lograr esto si los videos están en el mismo componente usando refs. Mi problema es que cada uno de los videos está anidado dentro de un componente y luego se coloca en una página principal. ¿Hay alguna manera de tener la misma funcionalidad pero llamada desde el padre? o una comunicación entre hermanos?

Creo que esto es más una cuestión de si puede acceder a los componentes hermanos $ref. ¿O hay un mejor enfoque posiblemente usando la tienda?

Mismo componente: (funciona como se esperaba)

 <div> <div class="l-text-image-band-media"> <youtube video-id="0mS0uT_wrhg" @playing="stopOtherVideo('player2')" ref="player1" ></youtube> </div> <div class="l-text-image-band-media"> <youtube video-id="0md0uT_wg7g" @playing="stopOtherVideo('player1')" ref="player2" ></youtube> </div> </div>

 methods: { stopOtherVideos(target) { this.$refs[target].player.stopVideo(); }, }

Padre: (cada componente con videos anidados en cada uno)

 <template> <div> <main class="main-content" id="main-content" tabindex="-1"> <ResponsibilityByTheNumbers is-video-component="true" :text="handsOnText" /> <ResponsibilityWhiteBandLeftText is-video-component="true" :showPrism="showPrism" :text="stemVideoBandText" /> </main> </div> </template>

El componente de video (solo muestra uno) no funciona

 <youtube video-id="0md0uT_wg7g" @playing="stopOtherVideo('player1')" ref="player2" ></youtube> methods: { stopOtherVideos(target) { this.$refs[target].player.stopVideo(); }, }