Is it possible to emit event from component inside slot

[purepear]

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.

[guykatz]

not trying to wake this up from the dead but...
image I want a wrapper custom component that shows a loading spinner and has a slot (slot container). the spinner should be removed when an event is emitted from a component that occupies the slot (slot child).
the parent's template looks something like:

<div>
  <slot></slot>  
    <div class="spinner active"></div>
</div>

the child's code looks something like:

    mounted: function () {
      this.$emit('loadStatusChange');
     }
  },
  template:'<span>some template txt<span>'

the usage is something like this:

  <vue-loading-wrapper>
      <vue-child></vue-child>
  </vue-loading-wrapper>

in order for the slot child to fulfill the parent's interface, they should emit an event to turn the spinner to inactive. One can argue that using $parent.emit with $on (per suggestion @yyx990803 above) complicates the issue as you need to take into consideration the life cycle of components into this. if, for example:
IT the slot child emits the event on mount than the slot container should register for it in earlier phases (not mount) because the child is mounted before the parent container and so in such a case, the event will be fired but missed by the parent.
Now, if you passed the hurdle above, you find yourself in an odd situation because you want to remove the spinner on the slot container usually after it has been mounted (thats the whole point). so now you need some code trickery on the parent in order to see if the 'clear spinner' event was received AND the the parent component is mounted.

long story short, in order to get the full slot power I do believe some sort of a mechanism should be introduced.
I am no JS expect by any means, this is just from the short experience I have with vue.
your thoughts are welcomed

[Justineo]

@guykatz

In your case:

<vue-loading-wrapper>
  <vue-child></vue-child>
</vue-loading-wrapper>

The state of vue-child should be driven by the data (data, props, computed) of the context component which holds this template. You can also bind that to vue-loading-wrapper. Even if vue-child loads data for its own, you can still do:

<vue-loading-wrapper :loading="childLoading">
  <vue-child @load="childLoading = false"></vue-child>
</vue-loading-wrapper>

[TomS-]

I'm having a lot of trouble with this. I can see that this will be a high use case, or at least I thought it would be.

Personally I have a card ui that carries a background, inside the card can be any content so it uses <slot></slot> in some cases it's just a background with text, however in others I would like to use a link that changes the background. The link is also a component. So the HTML looks like:

 <vue-card header="<?=$page->title ?>" background="<?=$page->background->size(500, 500)->url ?>">
    <?php foreach($page->link as $link): ?>
        <vue-link link="<?=$link->url ?>" @mouseover.native="background = '<?=$link->background->size(500, 500)->url ?>'"></vue-link>
    <?php endforeach; ?>
 </vue-card>

According to the documentation this should work and it would do if I could pass JSON over and make the HTML above into a component using v-for, however, because I need to access the CMS resize-image functions I can't do this. @mouseover.native targets the new Vue() instance rather than the <vue-card> component.

In this case $emit or even $parent.$emit will not work because it is firing on the new Vue() instance. So it seems impossible and I'll have to avoid using Vue for this element. I'll have to use native javascript on created I guess. But it isn't exactly the Vue way.

Edit:
Made a new component just to add native javascript on mount:

mounted: function() {
        var vm = this;

        [].forEach.call(this.$children[0].$children, function(n) {
            n.$el.addEventListener("mouseenter", function(e) {
                if(e.target.hasAttribute("data-background")) {
                    vm.activeBackground = e.target.getAttribute("data-background");
                }
            });
            n.$el.addEventListener("mouseleave", function(e) {
                vm.activeBackground = vm.background;
            });
        });
    }

It's very hacky and not "very Vue" at all... Wish there was a way to bubble up an event inside a slot...

[Danonk]

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

[TomS-]

@Danonk I hardly think "punishable by death" is fair. Not that I have to justify myself to you, I'm using a PHP CMS that doesn't have a REST API and I want to use Vue. Luckily you don't have to deal with the code I'm writing.