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