title: Emit event from content in slot to parent
body: <p>I'm trying to build a flexible carousel control that allows inner content elements to force changing a slide, aswell as the carousel controls itself to change slides</p>
  
  <p>A sample structure in my page looks like</p>
  
  <pre><code>&lt;my-carousel&gt;
    &lt;div class="slide"&gt;
      &lt;button @click="$emit('next')"&gt;Next&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="slide"&gt;
      &lt;button @click="$emit('close')"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/my-carousel&gt;
  </code></pre>
  
  <p>The template for my carousel is like</p>
  
  <pre><code>&lt;div class="carousel"&gt;
    &lt;div class="slides" ref="slides"&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/div&gt; 
    &lt;footer&gt;
     &lt;!-- other carousel controls like arrows, indicators etc go here --&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And script like</p>
  
  <pre><code>...
  created() {
   this.$on('next', this.next)
  }
  ...
  </code></pre>
  
  <p>Accessing the slides etc is no problem, however using <code>$emit</code> will not work and I can't seem to find a simple solution for this problem.</p>
  
  <p>I want to component to be easily reusable without having to use</p>
  
  <ul>
  <li>central event bus</li>
  <li>hardcoded slides within a carousel</li>
  <li>implement the next slide methods on page level and pass the current index to the control (as I'd have to do this every time I use the carousel)</li>
  </ul>