在 Vue 中为每个元素分配一个父元素<slot>

Question

我有一个 vue 组件，比如说my-component，它是这样的：

<div class="outer">
<div class="inner">
<slot></slot>
</div>
</div>

当我使用该组件时：

<my-component>
<p>This is paragraph 1 </p>
<p>This is paragraph 2 </p>
</my-component>

生成的 html 变为这样(通常应该(：

<div class="outer">
<div class="inner">
<p>This is paragraph 1 </p>
<p>This is paragraph 2 </p>
</div>
</div>

但相反，我正在寻找一种方法来产生这样的东西：

<div class="outer">
<div class="inner">
<p>This is paragraph 1 </p>
</div>
<div class="inner">
<p>This is paragraph 2 </p>
</div>
</div>

如何将一个innerdiv 与每个slot元素相关联？

Answer 1

一种方法是使用渲染函数而不是模板。这样，您可以检查默认插槽的内容并根据需要包装内容。

下面是一个示例。

console.clear()
Vue.component("container",{
template: "#container-template",
render(h){
// filter out things like carriage returns, spaces, etc
const content = this.$slots.default.filter(c => !c.text)
// build a list of wrapped content
const wrapped = content.map(c => h('div', {attrs: {class:"inner"}}, [c]))
// render the component
return h("div", {attrs:{class:"outer"}}, wrapped)
}
})
new Vue({
el: "#app"
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
<container>
<p>This is paragraph 1 </p>
<p>This is paragraph 2 </p>
</container>
</div>