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

这是一个 example .

注意: $slots[key] should be an array of vNodes .如果您使用 vNode，它会正确呈现，但会有错误(例如调用 vm._update 时)