Javascript 为每个<；插槽>；在Vue

我有一个vue组件，比如说

my component

，如下所示：

<div class="outer">
    <div class="inner">
        <slot></slot>
    </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>

当我使用组件时：

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

这是第1段

这是第2段

生成的html变成这样（通常应该是这样）：

这是第1段

这是第2段

但是，我正在寻找一种方法来生产类似的产品：

<div class="outer">
    <div class="inner">
        <slot></slot>
    </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>

这是第1段

这是第2段

---

如何将一个

internal

div与每个

slot

元素关联？

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

这里有一个例子

console.clear（）
组件（“容器”{
模板：“#容器模板”，
渲染（h）{
//过滤掉诸如回车、空格等内容
const content=this.$slots.default.filter（c=>！c.text）
//构建包装内容的列表
const wrapped=content.map（c=>h（'div'，{attrs:{class:'inner}}，[c]））
//渲染组件
返回h（“div”，{attrs:{class:“outer”}}，包装）
}
})
新Vue({
el:“应用程序”
})

这是第1段

这是第2段

Bert，并不是说我不欣赏你的答案，而是我在寻找一个更简单的解决方案，而不是使用render方法。是否可以使用命名插槽解决此问题？当然，谢谢你的回答。目前，我正在投票决定答案。如果没有其他解决方案，我会接受答案：）