Vue将插槽模板传递给扩展组件

Question

有没有办法将模板传递给扩展组件？示例,说明了问题:

有一个Slide用模板命名的组件,如下所示:

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

在其他地方,我需要以命令式样式创建和安装该组件:

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

问题是我不知道如何传递将在扩展组件的插槽中编译的模板.

的jsfiddle

Answer 1

您可以将Vue.compile与$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");

以上是需要一些数据的插槽示例。如果您的插槽内容只是 HTML，您可以通过以下方式逃脱：

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");

这是一个例子。

注意： $slots[key] 应该是一个 vNodes 数组。如果您使用 vNode，它将正确呈现，但会有错误（例如，在调用 vm._update 时）

Answer 2

你必须像这样传递它：

<Slide>
   //HTML code here goes to slot
</Slide>