Struggling with designing a slideshow component

I’m having an hard time figuring out how to design a Slideshow component.

Here is the developer story:

  • slideshow component will contains a variable number of slide components
  • the slideshow control the visibility status of each slide and shows the active slide (which needs to be visible)
  • if there are no slides or all the slides are invisible the slideshow must hide itself
  • slideshow is able to render the active slide component (initially the first slide) and cycle automatically through all the slides (based on a timeout property)
  • the slider has methods for pausing, resuming and moving through the slides
  • the slide component is able to render its content through the default slot (it can contain any other component or valid HTML)
  • a slide or a component inside a slide can communicate with the slideshow and ask to pause, resume, move to next or move to prev or hide the slide itself.

I’m able to create the basic mechanics of the slideshow (pause, resume, next, prev), but I’m struggling in the communication from child to parent. When relying on scopes both via template or render function, events raised by slides aren’t propagated to the parent slideshow component.

I cannot use event bus or vuex on this. Is there a way to let child component defined with scopes bubble up events to the parent, grand parent and such?