詳解Vue新增內置組件的使用

Posted on by

一、Teleport

Teleport 官方文檔

1.1 Teleport 介紹

1.Vue 鼓勵我們通過將 UI 和相關行為封裝到組件中來構建我們的 UI。我們可以將它們相互嵌套以構建構成應用程序 UI 的樹。

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

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

其實我理解的 Teleport 就是將一個組件掛載在 Vue app 之外，我們知道，Vue 屬於 SPA（單頁面）應用。所有的渲染都在 id 為 app 的標簽裡面，這樣的話，我們就創建一個和 app 是同級 的組件，並且通過 teleport 標簽引用，就可以任意頁面使用瞭

1.2 使用 Teleport

1.我們這裡也是實現一個全局模態框

2.通過 父子組件通信 機制，來使用 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> <!-- 定義一個和 app 同級的標簽 modal -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

定義一個 Modal 組件

<template>
	<!-- teleport 有個一個 to 屬性，掛載在 id為modal的標簽上 -->
    <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">
                <!-- 我們使用插槽，來支持外部插入內容 -->
                <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
    },
    // 驗證
    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 預覽效果

請添加圖片描述

二、Suspense

Suspense 官方文檔

Waring：作為 Vue3 中實驗性的功能，隨時都有可能修改，所以不建議用於生成環境的應用

2.1 介紹 Suspense

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

更詳細的內容大傢可以自行翻閱官方文檔，我隻是進行一部分的挑選

2.2 使用 Suspense

1.為瞭實現異步效果，我們可以使用 Promise 來實現異步操作。

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

<template>
	<!-- 等待3秒顯示數據 -->
    <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 未執行完成時，就會顯示 Loding... 執行完畢後，就會顯示數值 -->
    <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>

2.3 預覽效果

請添加圖片描述

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：