vue3的內(nèi)置組件匯總

更新時(shí)間：2024年01月08日 10:12:26 作者：weixin79893765432...

本文主要介紹了vue3的內(nèi)置組件匯總,詳細(xì)的介紹了Fragment,Teleport,Suspense三個(gè)組件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下

Fragment: Vue 3 組件不再要求有一個(gè)唯一的根節(jié)點(diǎn)，清除了很多無用的占位 div。
Teleport: 允許組件渲染在別的元素內(nèi)，主要開發(fā)彈窗組件的時(shí)候特別有用。
Suspense: 異步組件，更方便開發(fā)有異步請(qǐng)求的組件。

一、fragment 片斷組件（了解）

在 Vue2 中：組件必須有一個(gè)根標(biāo)簽。
在 Vue3 中：組件可以沒有根標(biāo)簽，內(nèi)部會(huì)將多個(gè)標(biāo)簽包含在一個(gè) fragment 的虛擬元素中。

這樣的好處是：減少標(biāo)簽層級(jí)，減小內(nèi)存占用。

二、teleport 瞬移組件

Teleport 是一種能夠?qū)?“我們的組件 html 結(jié)構(gòu)” 移動(dòng)到指定位置的技術(shù)。

使用 teleport 組件時(shí)，需要指定 “移動(dòng)位置”：

<teleport to="移動(dòng)位置"></teleport>

例如：用 suspense 實(shí)現(xiàn)全屏彈窗

父組件A：

<template>
  <div class="tel_a">
    <h3>父組件A</h3>
    <son />
  </div>
</template>
<script setup>
  import { defineAsyncComponent } from 'vue'

  const Son = defineAsyncComponent(() => import('./components/son.vue'))
</script>
<style lang="less" scoped>
  .tel_a {
    width: 30%;
    background: #aaa;
    padding: 10px 30px;
  }
</style>

子組件B：

<template>
  <div class="tel_b">
    <div>子組件B</div>
    <button @click="modalOpen = true"> 打開全屏彈窗（teleport） </button>
    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div class="content">
          我是一個(gè)teleport彈窗<br />（我的父組件是“body”）
          <button @click="modalOpen = false"> 關(guān)閉 </button>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script setup>
  import { ref } from 'vue'

  const modalOpen = ref(false)
</script>
<style lang="less" scoped>
  .flex-center () {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tel_b {
    padding: 10px;
    background: rgba(242, 177, 57);
  }
  .modal {
    .flex-center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      .flex-center;
      flex-direction: column;
      text-align: center;
      width: 260px;
      height: 160px;
      padding: 10px;
      background-color: #fff;
      button {
        display: block;
        margin-top: 30px;
      }
    }
  }
</style>

效果如下：

請(qǐng)?zhí)砑訄D片描述

三、suspense 組件

suspense 組件支持：在等待異步組件加載時(shí)，渲染一些額外內(nèi)容。不必非得等異步組件加載完畢再渲染，避免了因異步加載帶來的白屏和閃屏問題的出現(xiàn)，提高了用戶的體驗(yàn)。

suspense 的使用步驟：

先異步引入組件——defineAsyncComponent。
然后用 suspense 包裹組件，并配置好 default 和 fallback。

先異步引入組件：

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

然后用 Suspense 包裹組件：

<template>
    <div class="app">
        <h3>我是App組件</h3>
        <Suspense>
            <template #default>
                <Child/>
            </template>
            <template #fallback>
                <h3>加載中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

到此這篇關(guān)于vue3的內(nèi)置組件匯總的文章就介紹到這了,更多相關(guān)vue3 內(nèi)置組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: