'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