【Vue3】第九部分 Vue3中新的组件

【Vue3】第九部分 Vue3中新的组件

---

---

9. Vue3中新的组件

9.1 Fragment

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

9.2 Teleport

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

• 具体代码(做个弹窗功能)

  <template>
    <div class="grandson">
        <h3>我是grandson组件</h3>
        <button @click="isShow = true">点我展示</button>
        <teleport to="body">
          <div class="wrapper" v-if="isShow">
              <ul>
                  <li>一些内容</li>
                  <li>一些内容</li>
                  <button @click="isShow = false">点我关闭</button>
              </ul>     
        </div>
        </teleport>
    </div>
  </template>
  
  <script>
  import {ref} from "vue"
  export default {
      // eslint-disable-next-line vue/multi-word-component-names
      name:'grandson',
      setup(){
          let isShow = ref(false)
  
          return{
              isShow
          }
      }
  }
  </script>
  
  

9.3 Suspense

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

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    

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

    <template>
    	<div class="app">
    		<h3>我是App组件</h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>加载中.....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>
    

---

总结

：以上就是今天要讲的内容,希望对大家有所帮助！！！