'Vue pass template to child component without rendering slot in template
So I have this <Chart /> component, that renders its tooltip with a formatter function.
<template>
<chart :options="options" />
</template>
<script>
export default {
data(){
return {
options: {
tooltip: {
formatter({date, points}) {
const $component = new Vue({
...this.tooltipComponent,
propsData: {
date,
points,
}
}).$mount();
return $component.$el.outerHTML;
},
}
}
}
},
props: {
tooltipComponent: {
type: Object,
}
}
}
</script>
It is wrapped by a more specific component <SpecificChart /> that goes:
<template>
<Chart :tooltipComponent="MyTooltip" />
</template>
<script>
import MyTooltip from './MyTooltip';
export default {
data() {
return {
MyTooltip,
}
}
}
</script>
It works this way, but I find rather inelegant to pass the component as a prop.
I'd rather use a slot, which feels like the proper way to do this:
<template>
<Chart>
<template v-slot:tooltip="props">
<MyTooltip v-bind="props" />
</template>
</Chart>
</template>
But using this syntax, I did not succeed into retrieving the $slot on the <Chart /> component side. I tried this.$slots and this.$scopedSlots but them both seem empty. My guess is that since it is not rendered in the template, it is not there in this.
So the question is, is there a way to retrieve this template, and to render it as a string, just as I do with the above component? Or is there any other solution to this case?
Thanks
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
