前言:
众所周知,vue3突破了每一个vue文件中只能有一个根标签的限制,但是我们还有很多项目都是vue2的项目,如果让vue2中实现一个类似</>的效果呢,像react的16.2.0的版本之后,可以直接用<></>,vue3中使用tsx也可以轻松使用<></>,vue2要想实现这种效果,需要借助一个插件 vue-fragment。
实现效果:
1、使用div包起来的效果
2、使用我们插件包起来的效果
实现步骤:
1、安装,npm/cnpm/pnpm都是下面的,yarn的话 是第二个
npm i vue-fragment -S
yarn install vue-fragment -S
2、main.js中引入
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
3、页面代码中直接包起来
<fragment>
你的内容
</fragment>