前端之vue3新组件(fragment、teleport、Suspense、其他)

1.fragment

说明：
vue2模板中必须要有一个根标签，vue3中却不用，就是用这个Fragment标签作为根标签，包裹住我们写的内容。渲染的时候又将其去掉。

小结：

2.teleport

使用（eg：弹窗）

<template>
  <div>
    <button @click="isShow = true">显示弹窗</button>
    <teleport to="body">
      <div class="mask" v-if="isShow">
        <div class="dialog">
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <button @click="isShow = false">关闭弹窗</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
import {
      
       ref } from "vue";
export default {
      
      
  setup() {
      
      
    let isShow = ref(false);

    return {
      
      
      isShow,
    };
  },
};
</script>

<style >
.dialog {
      
      
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: skyblue;
  text-align: center;
}
.mask {
      
      
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>
// 写着写着就把老师的源码抄完了o(╥﹏╥)o

有两个默认插槽，default，fallback
to属性指定放到的位置（可以直接用html标签，还可以用css选择器）

Suspense内置标签

<template>
  <h1>app</h1>

  <Suspense>
    <template v-slot:default>
      <MyDialog />
    </template>
    <template v-slot:fallback>
      <h4>稍等,数据加载中……</h4>
    </template>
  </Suspense>
</template>

引入组件的两种方式

静态引用，所有组件都准备好了才显示
动态引入，未引入的组件不占位置

其他

解决办法：