vue2如何實現(xiàn)vue3的teleport
更新時間：2022年04月18日 15:48:14 作者：最有才的河南大漢
這篇文章主要介紹了vue2如何實現(xiàn)vue3的teleport，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue2實現(xiàn)vue3的teleport
不支持同一目標(biāo)上使用多個teleport（代碼通過v-if就能實現(xiàn)）
組件
<script>
?? ?export default {
?? ??? ?name: 'teleport',
?? ??? ?props: {
?? ??? ??? ?/* 移動至哪個標(biāo)簽內(nèi)，最好使用id */
?? ??? ??? ?to: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?required: true
?? ??? ??? ?}
?? ??? ?},
?? ??? ?mounted() {
?? ??? ??? ?document.querySelector(this.to).appendChild(this.$el)
?? ??? ?},
?? ??? ?destroyed() {
?? ??? ??? ?document.querySelector(this.to).removeChild(this.$el)
?? ??? ?},
?? ??? ?render() {
?? ??? ??? ?return <div>{this.$scopedSlots.default()}</div>
?? ??? ?}
?? ?}
</script>使用
<teleport to="#header__left">
?? ?<div>
?? ??? ?當(dāng)前組件引用{{msg}}
?? ?</div>
</teleport>vue3新特性teleport介紹
teleport是什么
Teleport 是一種能夠?qū)⑽覀兊哪０逡苿拥?DOM 中 Vue app 之外的其他位置的技術(shù)。
如果我們嵌套在 Vue 的某個組件內(nèi)部，那么處理嵌套組件的定位、z-index 和樣式就會變得很困難。
使用Teleport 就可以方便的解決組件間 css 層級問題
teleport怎么使用
要使用teleport，首先要在頁面上添加一個元素，我們要將模態(tài)內(nèi)容移動到該頁面
下面舉個例子
// index.html <body> ? ... ? <div id="app"></div><!--Vue mounting element--> ? <div id="modal-wrapper"> ? ? <!--modal should get moved here--> ? </div> </body>
我們將模態(tài)內(nèi)容包裝在 teleport 組件中，還需要指定一個 to 屬性，為該屬性分配一個查詢選擇器，以標(biāo)識目標(biāo)元素，在本例中為 #modal-wrapper
// App.vue <template> ? <button @click="toggleModalState">Open modal</button> ? <teleport to="#modal-wrapper"> ? ? <modal v-if="modalOpen"> ? ? ? <p>Hello, I'm a modal window.</p> ? ? </modal> ? </teleport> </template>
teleport 中的任何內(nèi)容都將渲染在目標(biāo)元素中
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結(jié)合實例代碼給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結(jié)合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下2018-07-07
vue3集成Element-plus實現(xiàn)按需自動引入組件的方法總結(jié)
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于vue3集成Element-plus實現(xiàn)按需自動引入組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
在vue中當(dāng)我們管理數(shù)據(jù)的時候比較亂，我們要用到下面的這個庫，本文主要介紹了如何使用 Vuex的入門教程，具有一定的參考價值，感興趣的可以了解一下2022-02-02
Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題）
本文主要介紹了Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項目，通過幾個默認的步驟幫助你快速的構(gòu)建Vue.js項目。非常具有實用價值，需要的朋友可以參考下2019-01-01
使用element-ui +Vue 解決 table 里包含表單驗證的問題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗證的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個樣式出現(xiàn)時，就會導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
Vue項目線上更新無需強制刷新的幾種實現(xiàn)方案(無感更新)
在 Vue 項目中,當(dāng)發(fā)布新版本后,用戶可能因為瀏覽器緩存而繼續(xù)使用舊版本,所以本文給大家介紹了Vue 項目線上更新無需強制刷新的幾種實現(xiàn)方案,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09