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与ManualResetEvent结合使用。

$createElement

以上是需要一些数据的插槽示例。如果您的广告位内容只是HTML，那么您可以放弃：

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

这是example。

注意： $slots[key] should be an array of vNodes。如果使用vNode，它将正确呈现，但会出现错误（例如，在调用vm._update时）

Answer 2

如果您愿意稍微改变一下，<component>代替<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')

Answer 3

你必须像这样传递：

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

Answer 4

（这个问题类似于SO question。我将在这里分享一个类似的答案，我在这里发帖。）

诀窍很简单。基本上，在扩展时，创建一个将Parent注册为本地组件的新组件。

演示：https://jsfiddle.net/jacobgoh101/omjgmb3f/

const Slide = Vue.extend({
  components: {
    Parent
  },
  template: `
  <Parent>
    <div style="color:red">I am a slot</div>
  </Parent>
`
});
new Slide().$mount('#container')

Answer 5

如果您可以更改源代码结构，您还应该能够使用jsx。在Vue-Cli3中，它需要其他babel插件，在Nuxt中，它是开箱即用的。您只需创建一些挂钩函数作为方法或计算，例如：

slotHook () {
  return(
  <template v-slot.../>
)}

并将其放置在render函数中。然后，在子级（扩展了默认级的子级）中，覆盖slotHook方法：

slotHook () {
  return (
    <template v-slot... some-differen-params:.../>
)}

此方法在渲染过程中不会引起任何错误/问题，并且可以完美工作。其他方法可能是使用PUG模板及其阻止和扩展功能。我知道我发布此回复的时间很晚，但也许可以对某人有所帮助。

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

5 个答案: