vue实现fragment

Vue 3 中实现 Fragment

Vue 3 默认支持 Fragment，无需特殊处理。模板中可以直接使用多根节点：

<template>
  <div>Root 1</div>
  <div>Root 2</div>
</template>

Vue 2 中实现 Fragment

Vue 2 需要通过第三方库或自定义组件实现多根节点：

方法 1：使用 vue-fragment 库 安装库：

npm install vue-fragment

注册插件：

import Vue from 'vue'
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

使用方式：

<template>
  <fragment>
    <div>Content 1</div>
    <div>Content 2</div>
  </fragment>
</template>

方法 2：自定义组件实现 创建虚拟组件：

Vue.component('fragment', {
  functional: true,
  render(h, ctx) {
    return ctx.children
  }
})

注意事项

• Vue 2 中使用 Fragment 时，某些工具链可能需要额外配置
• Fragment 不会渲染为真实 DOM 节点，只作为逻辑容器
• 样式绑定需直接作用于子元素，不能绑定到 Fragment 上