问:Vue中有没有类似React中<>空标签的东西呢?
答:有

不废话直接上方案:

方案一

vue2/3应该是通用的方式,vue3上可行
若上级使用到<Transition>会提示:
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.

<template>

  // 这里作为一个空标签根节点
  // 记得加上v-if="true",要不不显示内容
  <template v-if="true">
    <common-header />
      <slot />
    <common-footer />
  </template>
  
</template>

方案二

基于vue-fragment
资料来源:https://www.cnblogs.com/chenss15060100790/p/16381081.html
github:https://github.com/Thunberg087/vue-fragment

Ps: nuxt3中用不了

  • 安装fragment
npm i -s vue-fragment

调整main.js,将fragment添加到Vue中

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

方案三

基于Vue3,使用显性attr绑定

在这里插入图片描述
https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes

Logo

前往低代码交流专区

更多推荐