一起从零开始学VUE（17）VUE3.0新的组件

Fragment

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

Teleport:传送

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

实例-模拟模态框

要求： 在Son组件中添加一个div，点击按钮出现此div模拟出弹框效果

问题： 但是发现弹框会将组件撑开，无法达到预期效果

解决方法：

<template>
  <div class="container">
    <h1>我是Son组件---{
   
   { name }}-{
   
   { price }}</h1>
    <button @click="isShow = true" type="button">点击出弹框</button>
    <teleport to="body" v-if="isShow">
      <div class="mask">
        <div class="dialog">
          <span @click="isShow = false" class="closeBtn">X</span>
          <hr />
          <span> 我是弹框</span>
        </div>
      </div>
    </teleport>
  </div>
</template>

Suspense

1. 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

2. 使用步骤：

   • 异步引入组件

   const Child = defineAsyncComponent(()=>import("./components/Child.vue"))
   

   • 使用Suspense包裹组件，并配置好default与fallback

   <template>
     <div class="appContainer">
       <h1>我是APP组件---{
        
        { name }}-{
        
        { price }}</h1>
       <Suspense>
         <template v-slot:default>
           <Child></Child>
         </template>
         <template v-slot:fallback>
           <h1>请稍后</h1>
         </template>
       </Suspense>
     </div>
   </template>