上一篇：

15.0 vue3 provide&inject跨組件通信方式_十一月的蕭邦-CSDN博客上一篇：14.0 vue3 customRef的使用_十一月的蕭邦-CSDN博客上一篇：vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇記錄vue3的customRef，customRef是vue3的一大亮點，custom的意思大家都懂，自定義的意思，一旦出現自定義，那么就代表我們可以做很多基于自己的需求的操作，vue3的官方文檔的關于這塊的示例其實已經蠻不錯了，看代碼需求是這樣，我們需https://blog.csdn.net/qq_42543244/article/details/122869521本篇記錄vue3中新標簽 Teleport標簽，并且來封裝一個dialog組件，最后呈現效果：

dialog組件內將會有之前記錄學習的知識內容，props傳值，slot的使用，refs的調用方式以及Teleport標簽等等

?文件目錄：

?App.vue

<template><div class="grand"><h1>我是app</h1><child></child></div> </template><script> import Child from "@/components/Child.vue";export default {name: "App",components: {Child,},/*Fragment：·在vue2中我們必須要有一個根標簽，·vue3中我們可以沒有根標簽，內部會將多個標簽包含在一個Fragment虛擬元素中好處：減少標簽層級，減小內存占用（多少能較少點吧...）Teleport：是一種能夠將我們的模板移動到 DOM 中 Vue app 之外的其他位置的技術場景：像 modals,toast 等這樣的元素，很多情況下，我們將它完全的和我們的 Vue 應用的 DOM 完全剝離，管理起來反而會方便容易很多原因在于如果我們嵌套在 Vue 的某個組件內部，那么處理嵌套組件的定位、z-index 和樣式就會變得很困難另外，像 modals,toast 等這樣的元素需要使用到 Vue 組件的狀態（data 或者 props）的值這就是 Teleport 派上用場的地方傳送，瞬間移動，玩過lol，王者榮耀的朋友可以稍微聯想一哈*/ }; </script> <style scoped> .grand {background-color: rgb(150, 156, 154);padding: 50px; } </style>

Child.vue

<template><div class="child"><h2>我是child</h2><button @click="showDialog">顯示彈出框木蘭辭</button><my-dialog ref="refDialog" :id="123" @confirm="confirm" title="木蘭辭"><template v-slot:content><div class="msg">唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡帖花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？</div></template></my-dialog><son></son></div> </template><script> import Son from "./Son.vue"; import MyDialog from "./MyDialog.vue"; import {ref} from "vue";export default {components: {Son, MyDialog},setup() {let refDialog = ref(null);function showDialog() {refDialog.value.open();}function confirm() {console.log("點擊了確定按鈕");refDialog.value.close();}return {refDialog, showDialog, confirm};}, }; </script><style scoped> .child {background-color: rgb(22, 129, 201);padding: 50px; } </style>

Son.vue

<template><h3 class="son">我是son</h3><button @click="showDialog">顯示彈出框出師表</button><my-dialog ref="refDialog" :id="123" @confirm="confirm" title="出師表"><template v-slot:content><div class="msg">先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈于內，忠志之士忘身于外者，蓋追先帝之殊遇，欲報之于陛下也。誠宜開張圣聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。宮中府中，俱為一體，陟罰臧否，不宜異同。若有作奸犯科及為忠善者，宜付有司論其刑賞，以昭陛下平明之理，不宜偏私，使內外異法也。侍中、侍郎郭攸之、費祎、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然后施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用于昔日，先帝稱之曰能，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。親賢臣，遠小人，此先漢所以興隆也；親小人，遠賢臣，此后漢所以傾頹也。先帝在時，每與臣論此事，未嘗不嘆息痛恨于桓、靈也。侍中、尚書、長史、參軍，此悉貞良死節之臣，愿陛下親之信之，則漢室之隆，可計日而待也。臣本布衣，躬耕于南陽，茍全性命于亂世，不求聞達于諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣于草廬之中，咨臣以當世之事，由是感激，遂許先帝以驅馳。后值傾覆，受任于敗軍之際，奉命于危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂嘆，恐托付不效，以傷先帝之明，故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除奸兇，興復漢室，還于舊都。此臣所以報先帝而忠陛下之職分也。至于斟酌損益，進盡忠言，則攸之、祎、允之任也。愿陛下托臣以討賊興復之效，不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、祎、允等之慢，以彰其咎；陛下亦宜自謀，以咨諏善道，察納雅言。深追先帝遺詔，臣不勝受恩感激。今當遠離，臨表涕零，不知所言。</div></template></my-dialog> </template><script> import MyDialog from "./MyDialog.vue"; import {ref} from "vue";export default {components: {MyDialog},setup() {let refDialog = ref(null);function showDialog() {refDialog.value.open();}function confirm() {console.log("點擊了確定按鈕");refDialog.value.close();}return {refDialog, showDialog, confirm};}, }; </script><style scoped> .son {background-color: rgb(218, 199, 29);padding: 20px 0; }.msg {color: brown;line-height: 30px; } </style>

MyDialog.vue

<template><teleport to="body"><div class="mask" v-if="isShow"><div class="dialog"><div class="header">{{ title }}</div><div class="content"><slot name="content"></slot></div><div class="footer"><button @click="close">取消</button><button @click="confirm">確定</button></div></div></div></teleport> </template><script> /* 使用teleport移動至設置元素所在位置 */ import { ref } from "vue"; export default {props: {id: {type: Number,default: null,},title: {type: String,default: "提示",},},emits: ["confirm"],setup(props, { emit }) {let isShow = ref(false);getData();function getData() {console.log("拿到的id===>", props.id);}function open() {isShow.value = true;}function close() {isShow.value = false;}function confirm() {emit("confirm");}return { isShow, open, close, confirm };}, }; </script><style scoped> .mask {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 99; } .dialog {width: 500px;background-color: #fff;border-radius: 10px;padding: 20px; }.header {text-align: center;font-size: 23px;font-weight: bold; }.content {max-height: 300px;overflow: auto;margin: 20px 0; }.footer {display: flex;align-items: center;justify-content: flex-end;height: 50px; }.footer > button {margin-left: 10px;width: 80px;height: 30px; } </style>

可能還會有人疑惑，Teleport標簽到底有什么用？請看下圖

去掉teleport標簽對，審查元素，看看彈出框的位置

可以看出來dialog元素在引用的父組件下，但是這樣帶來的效果并不是很好，比如會被父組件中的某些css樣式影響到，在elementui的dialog組件中我們會見到這兩個屬性?

在vue3中我們利用teleport可以輕易的達到此目的，請看加上teleport后，dialog組件已經和app處于同級關系

?結束！！！

總結

以上是生活随笔為你收集整理的16.0 vue3 Teleport---自定义dialog组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。