Is it possible to emit event from component inside slot

Vue.js version

2.1.3

Reproduction Link

https://jsfiddle.net/x8a3vvk2/8/

Events emitted from component inside slot are not received. $emit(‘testevent’) is not working but $parent.test() works.

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

<div id="app" >
  <parent>
    <child></child>
   </parent>
</div>

Vue.component('parent', {
  template: `<div><slot @testevent="test"></slot></div>`,
  methods: {
    test () {
      alert('Test ok')
    }
  }
})

Vue.component('child', {
  template: `<button @click="$emit('testevent')">I'm slot</button>`
  //template: `<button @click="$parent.test()">I'm slot</button>`
})

new Vue({
  el: '#app',
})

[yyx990803]

You cannot listen to events on <slot>. It can end up rendering anything: text, plain element, multiple nodes… the behavior will be unpredictable.

It seems you are trying to make a slot container communicate with a slot child - in most cases this means the two components are coupled by-design, so you can do something like this.$parent.$emit(...) from the child, and listen to that event in the parent with this.$on(...).

I am still open to ideas on improving the ways slot parent and child can communicate, but events on <slot> doesn’t really sound like a right direction to me.

[Danonk]

Holy shit @TomS- , such mixing php and Vue should be punishable by death! Your code is horribly unmaintainable.