Vue.js多插槽渲染问题：如何在LayoutBlank的render中传递所有插槽

嘿，我明白你的问题所在了——原来的LayoutBlank组件只把默认插槽的第一个元素返回了，完全没管其他命名插槽，所以#second的内容根本没机会传递给LayoutBlankTemplate。下面是具体的修复方案，分两种写法，你可以按需选择：

方案一：手动指定要转发的插槽（适合插槽数量固定的情况） #

直接修改LayoutBlank的render方法，创建LayoutBlankTemplate的虚拟节点并明确传递所有插槽：

<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
  name: 'LayoutBlank',
  created() {
    this.$parent.$emit('update:layout', LayoutBlankTemplate);
  },
  render(h) {
    // 用h函数创建LayoutBlankTemplate节点，第三个参数传递插槽内容
    return h(LayoutBlankTemplate, {}, {
      default: this.$slots.default,
      second: this.$slots.second
      // 以后新增命名插槽，直接在这里添加对应的键值对就行
    })
  },
}
</script>

方案二：自动转发所有插槽（通用写法，无需手动维护） #

如果后续可能新增更多命名插槽，用这个更省心的写法，自动遍历所有插槽并转发：

<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
  name: 'LayoutBlank',
  created() {
    this.$parent.$emit('update:layout', LayoutBlankTemplate);
  },
  render(h) {
    // 收集所有普通插槽
    const slots = {};
    Object.keys(this.$slots).forEach(slotName => {
      slots[slotName] = this.$slots[slotName];
    });

    // 如果你需要支持作用域插槽，再加上下面这段
    // Object.keys(this.$scopedSlots).forEach(slotName => {
    //   slots[slotName] = props => this.$scopedSlots[slotName](props);
    // });

    return h(LayoutBlankTemplate, {}, slots);
  },
}
</script>

为什么这么改能解决问题？ #

原来的return this.$slots.default[0]只提取了默认插槽的第一个元素，相当于把其他插槽直接丢弃了。现在我们通过h函数（Vue的虚拟节点创建函数）手动构建LayoutBlankTemplate，并把所有插槽内容作为第三个参数传递过去，这样LayoutBlankTemplate就能接收到所有插槽，包括你新增的#second，自然就能正确渲染了。

改完之后，你的BlankTest组件里的两个插槽内容都会正常显示出来~

内容的提问来源于stack exchange，提问作者Tom