Vue pass slot template to extended component

Question

Is any way to pass a template to extended component? Example, that illustrates the problem:

There is a component named Slide with a template like so:

<template>
    <div class="swiper-slide swiper-slide-one">
        <div class="swiper-filter"></div>
        <slot />
    </div>
</template>

In other place i need to create and mount that component in imperative style:

import SlideComponent from '@/components/Slide'
const Slide = Vue.extend(SlideComponent);
new Slide().$mount('#container');

The problem is that i have no idea how to pass a template that will be compiled in the slot of the extended component.

jsfiddle

Answer 1

You can use Vue.compile combined with $createElement.

const slotTemplate = `<div><h4>This is the slot content</h4>{{message}}</div>`;
const renderer = Vue.compile(slotTemplate)
const slotContent = {
  data(){
    return {
      message: "some data in the slot"
    }
  },
  render: renderer.render,
  staticRenderFns: renderer.staticRenderFns
}

const instance = new Slide();
instance.$slots.default = [instance.$createElement(slotContent)];
instance.$mount("#container");

Above is an example of a slot that requires some data. If your slot content is just HTML you could get away with just this:

const slotTemplate = `<div><h4>This is the slot content</h4></div>`
const instance = new Slide();
instance.$slots.default = [instance.$createElement(Vue.compile(slotTemplate))];
instance.$mount("#container");

Here is an example.

Note: $slots[key] should be an array of vNodes. It will render correctly if you use a vNode, but there will be bugs (e.g. when calling vm._update)

Answer 2

If you are open to change your approach a little bit, a <component> instead of <slot>:

https://jsfiddle.net/jonataswalker/z5Lgbjv8/

const Parent = {
  template: `<div>
        <span>parent content</span>
      <component :is="view"></component>
    </div>`,
  data() {
    return { view: '' }
  }
}

const Other = {
  template: `<div>
        <h1>from Other</h1>
    </div>`
}

const Slide = Vue.extend(Parent)

// how to pass template to the Parent`s slot?
new Slide({
  data: { view: Other }
}).$mount('#container')