溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue2怎么實現vue3的teleport”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue2怎么實現vue3的teleport”吧!
不支持同一目標上使用多個teleport（代碼通過v-if就能實現）
組件
<script>
export default {
name: 'teleport',
props: {
/* 移動至哪個標簽內，最好使用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>
當前組件引用{{msg}}
</div>
</teleport>Teleport 是一種能夠將我們的模板移動到 DOM 中 Vue app 之外的其他位置的技術。
如果我們嵌套在 Vue 的某個組件內部，那么處理嵌套組件的定位、z-index 和樣式就會變得很困難。
使用Teleport 就可以方便的解決組件間 css 層級問題
要使用teleport，首先要在頁面上添加一個元素，我們要將模態內容移動到該頁面
下面舉個例子
// index.html <body> ... <div id="app"></div><!--Vue mounting element--> <div id="modal-wrapper"> <!--modal should get moved here--> </div> </body>
我們將模態內容包裝在 teleport 組件中，還需要指定一個 to 屬性，為該屬性分配一個查詢選擇器，以標識目標元素，在本例中為 #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 中的任何內容都將渲染在目標元素中
到此，相信大家對“vue2怎么實現vue3的teleport”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
