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>

如何将一个inner div与每个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>

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

1 个答案: