如何为vuejs中的每个插槽添加父级？

Question

我正在尝试为我的组件上的每个插槽添加父跨度，但它无效。

render(createElement) {
  return createElement('div', this.$slots.default.map(vnode => createElement('span', vnode)));
},

我想得到如下的HTML

<div>
  <span><img /></span>
  <span><img /></span>
  <span><img /></span>
</div>

但最大限度的我能得到它

<div>
  <span>
    <img />
    <img />
    <img />
  </span>
</div>

如何解决？

Answer 1

试试这个。

render(h){
  return h("div", this.$slots.default.map(v => {
    // eliminate returns, comments
    if (!v.tag)
      return v

    return h('span', [v])
  }))

Example