Fragment组件和Teleport组件以及Suspense组件

2023-12-15 15:27:16

Fragment组件

Fragment组件
在vue2中：组件必须有一个根标签
在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
好处：减少标签层级，减小内存占用

Teleport组件

Teleport组件
什么是Teleport？ -- Teleport是一种能够将我们的组件html结构移动到指定位置的技术

具体案例代码如下：实现一个对话框，位置应该展示body内
<button>点我开启弹窗</button>

<!-- to="body"会将该html元素展示在body内 -->
<teleport to="body">
    <div></div>
    ...
    <button>点我关闭弹窗</button>
</teleport>


最终在控制台上看的结构：
<body>
    ...

    <!-- 会显示在这里 -->
    <div></div>
    ...
    <button>点我关闭弹窗</button>
</body>

备注：to不一定只能写在body，比如你创建一个<div id="box"></div>, 那么可以写成to="#box"

Suspense组件

1. 异步引入组件：
import {defineAsyncComponent} from 'vue';
const ChildC = defineAsyncComponent(() => import('./components/ChildC'))

2. 使用Suspend包裹组件，并配置好default与fallback

具体案例代码如下：
<template>
  <Suspense>
    <template v-slot:default>
      <ChildC />
    </template>
    <!-- 还没加载出来时会先显示这个 -->
    <template v-slot:fallback>
      <div>稍等！！！加载中</div>
    </template>
  </Suspense>
</template>

<script>
// 静态引入
// import ChildC from './components/ChildC'
// 动态引入（异步引入）
import {reactive, defineAsyncComponent} from 'vue';
const ChildC = defineAsyncComponent(() => import('./components/ChildC'))

export default {
  name: 'App',
  components: { ChildC },
  setup() {
    const car = reactive({
      money: 10,
      name: 'car'
    })

    return {
      car
    }
  }
}
</script>

文章来源:https://blog.csdn.net/weixin_50236973/article/details/135016913
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。