詳解Vue新增內(nèi)置組件的使用
一、Teleport
Teleport 官方文檔
1.1 Teleport 介紹
1.Vue 鼓勵(lì)我們通過(guò)將 UI 和相關(guān)行為封裝到組件中來(lái)構(gòu)建我們的 UI。我們可以將它們相互嵌套以構(gòu)建構(gòu)成應(yīng)用程序 UI 的樹。
2.但是，有時(shí)組件模板的一部分在邏輯上屬于該組件，而從技術(shù)角度來(lái)看，最好將模板的這部分移動(dòng)到 DOM 中的其他位置，即 Vue 應(yīng)用程序之外。
上面的話是不是看起來(lái)很懵逼，其實(shí)是翻譯自 官方文檔
其實(shí)我理解的 Teleport 就是將一個(gè)組件掛載在 Vue app 之外，我們知道，Vue 屬于 SPA（單頁(yè)面）應(yīng)用。所有的渲染都在 id 為 app 的標(biāo)簽里面，這樣的話，我們就創(chuàng)建一個(gè)和 app 是同級(jí) 的組件，并且通過(guò) teleport 標(biāo)簽引用，就可以任意頁(yè)面使用了
1.2 使用 Teleport
1.我們這里也是實(shí)現(xiàn)一個(gè)全局模態(tài)框
2.通過(guò) 父子組件通信 機(jī)制，來(lái)使用 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">
<!-- 我們使用插槽，來(lái)支持外部插入內(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ù)覽效果
二、Suspense
Suspense 官方文檔
Waring：作為 Vue3 中實(shí)驗(yàn)性的功能，隨時(shí)都有可能修改，所以不建議用于生成環(huán)境的應(yīng)用
2.1 介紹 Suspense
是可以用來(lái)異步數(shù)據(jù)，它擁有一個(gè)本地的處理方法用來(lái)適配多種情形提供了二選一（加載完成 和 失敗的插槽）
更詳細(xì)的內(nèi)容大家可以自行翻閱官方文檔，我只是進(jìn)行一部分的挑選
2.2 使用 Suspense
1.為了實(shí)現(xiàn)異步效果，我們可以使用 Promise 來(lái)實(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>
2.3 預(yù)覽效果
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue實(shí)現(xiàn)虛擬列表組件解決長(zhǎng)列表性能問(wèn)題
這篇文章主要介紹了在vue中實(shí)現(xiàn)虛擬列表組件，解決長(zhǎng)列表性能問(wèn)題,本文給大家分享實(shí)現(xiàn)思路及實(shí)例代碼，需要的朋友可以參考下2022-07-07
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
本篇文章主要介紹了Vue.js彈出模態(tài)框組件開發(fā)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序?qū)崙?zhàn)基于vue2實(shí)現(xiàn)瀑布流的代碼實(shí)例
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，這篇文章主要介紹了微信小程序?qū)崙?zhàn)，基于vue2實(shí)現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對(duì)比vue2帶來(lái)的性能提升有很多優(yōu)勢(shì)，總體來(lái)說(shuō)Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue父子組件通訊方式及實(shí)現(xiàn)方法，文中通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可以參考閱讀下2023-06-06
vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換/制作tab組件詳細(xì)教程
在項(xiàng)目開發(fā)中需要使用vue實(shí)現(xiàn)tab頁(yè)簽切換功能,所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換/制作tab組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
項(xiàng)目中后臺(tái)返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式
在做項(xiàng)目的過(guò)程中,模版相同,可是不標(biāo)題和圖片不同,循環(huán)標(biāo)題我們知道可以用v-for循環(huán),可是該怎么引入本地圖片呢？下面這篇文章主要給大家介紹了v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式,需要的朋友可以參考下2021-09-09