Pass to slot a component that also needed a slot property

Question

How can i test a component with slot, for example carousel has a slot component inside and slider has a slot component inside.

This doesnt support that feature.

Maybe i must use e2e tests?

Tell me please how to do this. Thank you.

// This is how i use
<carousel>
  <slide>
    <div></div>
  </slide>
</carousel>

// Carousel component
<carousel>
  <slot></slot>
</carousel>

// Slide component
<slide>
  <slot></slot>
</slide>

No, you don't have to use e2e tests. Since carousel and slide are separate components, you can write unit tests for each component separately. The carousel's unit tests verify whatever behavior you're expecting from that component -- which shouldn't depend on slide. Similarly, the unit tests for slide verify that component's behavior independent of whatever carousel does. — Stephen Thomas, Sep 04 '18 at 00:24

score 0 · Answer 1 · answered Sep 04 '18 at 09:56

you have to edit the prototype of vue like this

in the main.js file

 Vue.prototype._b = (function (bind) {
  return function(data, tag, value, asProp, isSync) {
    if (value && value.$scopedSlots) {
      data.scopedSlots = value.$scopedSlots;
      delete value.$scopedSlots;
    }
    return bind.apply(this, arguments);
  };
})(Vue.prototype._b);

And you just need to add v-bind="{$scopedSlots}" to the component.

Pass to slot a component that also needed a slot property

1 Answers1