文章目錄
- 一、Teleport
- 1.1 Teleport 介紹
- 1.2 使用 Teleport
- 1.3 預覽效果
- 二、Suspense
- 2.1 介紹
- 2.2 使用 Suspense
- 2.3 預覽效果
Author：Gorit
Date：2021年12月5日
Website：CodingGorit 的小站
2021年發表博文：25/30
我們用 vite 搭建一個 Vue3 + TS 專案，我會使用 <script setup lnag="ts"> 和<script lang="ts"> 混合編程的方式來實作
一、Teleport
Teleport 官方檔案
1.1 Teleport 介紹
- Vue 鼓勵我們通過將 UI 和相關行為封裝到組件中來構建我們的 UI，我們可以將它們相互嵌套以構建構成應用程式 UI 的樹，
- 但是，有時組件模板的一部分在邏輯上屬于該組件，而從技術角度來看，最好將模板的這部分移動到 DOM 中的其他位置，即 Vue 應用程式之外，
上面的話是不是看起來很懵逼，其實是翻譯自 官方檔案
其實我理解的 Teleport 就是將一個組件掛載在 Vue app 之外，我們知道，Vue 屬于 SPA（單頁面）應用，所有的渲染都在 id 為 app 的標簽里面，這樣的話，我們就創建一個和 app 是同級 的組件，并且通過 teleport 標簽參考，就可以任意頁面使用了
1.2 使用 Teleport
- 我們這里也是實作一個全域模態框
- 通過 父子組件通信 機制，來使用 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>
- 使用 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
-
為了實作異步效果，我們可以使用 Promise 來實作異步操作，
-
我們定義如下組件 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>
- 在 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 預覽效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374802.html
標籤：其他