詳解Vue新增內(nèi)置組件的使用

更新時(shí)間：2021年12月10日 16:02:18 作者：Gorit

這篇文章主要為大家介紹了Vue新增內(nèi)置組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、Teleport

Teleport 官方文檔

1.1 Teleport 介紹

1.Vue 鼓勵(lì)我們通過將 UI 和相關(guān)行為封裝到組件中來構(gòu)建我們的 UI。我們可以將它們相互嵌套以構(gòu)建構(gòu)成應(yīng)用程序 UI 的樹。

2.但是，有時(shí)組件模板的一部分在邏輯上屬于該組件，而從技術(shù)角度來看，最好將模板的這部分移動(dòng)到 DOM 中的其他位置，即 Vue 應(yīng)用程序之外。

上面的話是不是看起來很懵逼，其實(shí)是翻譯自官方文檔

其實(shí)我理解的 Teleport 就是將一個(gè)組件掛載在 Vue app 之外，我們知道，Vue 屬于 SPA（單頁面）應(yīng)用。所有的渲染都在 id 為 app 的標(biāo)簽里面，這樣的話，我們就創(chuàng)建一個(gè)和 app 是同級(jí) 的組件，并且通過 teleport 標(biāo)簽引用，就可以任意頁面使用了

1.2 使用 Teleport

1.我們這里也是實(shí)現(xiàn)一個(gè)全局模態(tài)框

2.通過父子組件通信機(jī)制，來使用 teleport 的掛載的特性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="modal"></div> <!-- 定義一個(gè)和 app 同級(jí)的標(biāo)簽 modal -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

定義一個(gè) Modal 組件

<template>
	<!-- teleport 有個(gè)一個(gè) to 屬性，掛載在 id為modal的標(biāo)簽上 -->
    <teleport to="#modal">
        <div id="center" v-if="isOpen">
            <div class="modal-header" v-if="title">
                <h2>{{ title }}</h2>
                <hr />
            </div>
            <div class="modal-content">
                <!-- 我們使用插槽，來支持外部插入內(nèi)容 -->
                <slot></slot>
            </div>
            <button @click="buttonClick">Close</button>
        </div>
    </teleport>
</template>
<script lang="ts">
// defineProps<{ msg: string }>() Vue3 setup 定義 props
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        isOpen: Boolean,
        title: String
    },
    // 驗(yàn)證
    emits: {
        'close-modal': null
        // (payload: any) => {
        //     return payload.type === 'close'
        // }
    },
    setup(props, context) {
        const buttonClick = () => {
            context.emit('close-modal');
        }
        return {
            buttonClick
        }
    }
});
</script>
<style>
#center {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>

3.使用 Modal 組件

<script setup lang="ts">
import { ref } from 'vue';
import Modal from './components/Modal.vue';
const modalTitle = ref('你好，世界');
const modalIsOpen = ref(false);
const openModal = () => {
  modalIsOpen.value = true;
}
const onModalClose = () => {
  modalIsOpen.value = false;
}
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <button @click="openModal">modal</button>
    <Modal :title="modalTitle" :isOpen="modalIsOpen" @close-modal="onModalClose">
      My modal
    </Modal>
  </div>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1.3 預(yù)覽效果

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

二、Suspense

Suspense 官方文檔

Waring：作為 Vue3 中實(shí)驗(yàn)性的功能，隨時(shí)都有可能修改，所以不建議用于生成環(huán)境的應(yīng)用

2.1 介紹 Suspense

是可以用來異步數(shù)據(jù)，它擁有一個(gè)本地的處理方法用來適配多種情形提供了二選一（加載完成和失敗的插槽）

更詳細(xì)的內(nèi)容大家可以自行翻閱官方文檔，我只是進(jìn)行一部分的挑選

2.2 使用 Suspense

1.為了實(shí)現(xiàn)異步效果，我們可以使用 Promise 來實(shí)現(xiàn)異步操作。

2.我們定義如下組件 AsyncShow.vue 組件

<template>
	<!-- 等待3秒顯示數(shù)據(jù) -->
    <h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    setup() {
        return new Promise((resolve) => {
            setTimeout(() => {
                return resolve({
                    result: 43
                })
            }, 3000);
        });
    }
});
</script>
<style>
</style>

3.在 App.vue 里面使用該組件

<script setup lang="ts">
import AsyncShow from './components/AsyncShow.vue';
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="test-useURLLoader">
    <!-- Promise 未執(zhí)行完成時(shí)，就會(huì)顯示 Loding... 執(zhí)行完畢后，就會(huì)顯示數(shù)值 -->
    <Suspense>
      <template #default>
        <AsyncShow />
      </template>
      <template #fallback>
        <h2>
          Loading...
        </h2>
      </template>
    </Suspense>
  </div>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>