有没有办法将模板传递给扩展组件？举例说明问题：
有一个名为 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');
问题是我不知道如何传递将在扩展组件的插槽中编译的模板。
【问题讨论】：
标签： javascript vue.js
您可以将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 时）
【讨论】：
vm.$slots.default = [ ] 和 vm.$slots.default.push(somevnode) 好像没用？
如果您愿意稍微改变您的方法，请使用 <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')
【讨论】：
（这个问题与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')
【讨论】：
如果您可以更改源代码结构， 您还应该能够使用 jsx。 在 Vue-Cli3 中它需要额外的 babel 插件，在 Nuxt 中它是开箱即用的）。 您只需创建一些钩子函数作为方法或计算，例如：
slotHook () {
return(
<template v-slot.../>
)}
并将其放在渲染函数中。 然后，在子组件（扩展默认组件）中，你覆盖了 slotHook 方法：
slotHook () {
return (
<template v-slot... some-differen-params:.../>
)}
这种方法在渲染过程中不会导致任何错误/问题，并且可以完美运行。 其他方法可能是使用 PUG 模板及其块和扩展功能。 我知道我发布此回复很晚，但也许它可以帮助某人。
【讨论】：
你必须像这样传递它：
<Slide>
//HTML code here goes to slot
</Slide>
【讨论】：