vue2使用functional组件配合render函数实现渲染多个根节点

一、 背景说明

• 如下：这里有一个组件，是多根节点，此时vue2中会报错
• 一般情况我们会统一包一层div容器
• 缺点： 会影响原本的布局

<template>
  <div class="container1">容器1</div>
  <div class="container2">容器2</div>
  <div class="container3">容器3</div>
</template>

二、 如何在不影响布局情况下渲染多个根节点？

使用functional组件配合render函数实现渲染多个根节点

<template>
  <shadow-wrap>
    <div class="container1">容器1</div>
    <div class="container2">容器2</div>
    <div class="container3">容器3</div>
  </shadow-wrap>
</template>
<script>
/**
 * @type {
    
    import('vue').FunctionalComponent}
 */
const ShadowWrap = {
    
    
  functional: true,
  render(h, context) {
    
    
    return context.children;
  },
};
export default {
    
    
  components: {
    
    
    ShadowWrap,
  },
};
</script>