Is there a way to “connect” slots in nested components in Vue?

Let's say I'm developing an advanced popper.js for Vue, and I'm going to give it extra functionality. Here's what a very (child) component looks like:

 <popper>
   <div :is="tag" class="popper">
     {{ content }}
   </div>
   <button class="btn btn-primary" slot="reference">
     Reference Element
   </button>
 </popper>

As you can see, for it to work, you need to define a reference element directly below the ".popper" separator with the slot = "reference" attribute.

Question

How to turn my extended popper component into a reusable entity, otherwise you can pass indirect data indirectly from <enhanced-popper> //referenced element// </enhanced-popper>, so that it has the slot = "reference" attribute inside the child component (popper .js)?

What does not work :

, , , .

  <popper>
   <div :is="tag" class="popper">
    {{ content }}
   </div>
   <slot></slot>
 </popper>

, , , popper:

<slot name="reference">
 <slot></slot>
</slot>

, - - , - ( , ), , - .

Cheers, Paco

+4

Source: https://habr.com/ru/post/1690263/


All Articles