vue3知識點：Teleport元件

@

目錄

• 五、新的元件
  • 2.Teleport
    • 案例
    • 完整程式碼
• 本人其他相關文章連結

五、新的元件

2.Teleport

問題：什麼是Teleport？

答案：Teleport 是一種能夠將我們的元件html結構移動到指定位置的技術。

<teleport to="移動位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一個彈窗</h3>
			<button @click="isShow = false">關閉彈窗</button>
		</div>
	</div>
</teleport>

注意點1：

問題：使用傳送的好處？

答案：不影響其他元件html的結構，舉例說明我son元件有個div，我有個顯示按鈕，有個隱藏按鈕，如果不使用Teleport，那麼每次展示div時候會影響別的元件html結構，而使用Teleport就不會影響，具體效果看案例結果一目瞭然。

注意點2:
好處是方便定位，直接把html結構直接傳送走，比如案例的傳送至body處或者其他處。

案例

完整程式碼

專案結構

main.js

//引入的不再是Vue建構函式了，引入的是一個名為createApp的工廠函式
import { createApp } from 'vue'
import App from './App.vue'

//建立應用例項物件——app(類似於之前Vue2中的vm，但app比vm更“輕”)
const app = createApp(App)

//掛載
app.mount('#app')

App.vue

<template>
	<div class="app">
		<h3>我是App元件</h3>
		<Child/>
	</div>
</template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

Child.vue

<template>
	<div class="child">
		<h3>我是Child元件</h3>
		<Son/>
	</div>
</template>

<script>
	import Son from './Son'
	export default {
		name:'Child',
		components:{Son},
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

Son.vue

<template>
	<div class="son">
		<h3>我是Son元件</h3>
		<Dialog/>
	</div>
</template>

<script>
	import Dialog from './Dialog.vue'
	export default {
		name:'Son',
		components:{Dialog}
	}
</script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>

Dialog.vue

<template>
	<div>
		<button @click="isShow = true">點我彈個窗</button>
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一個彈窗</h3>
					<h4>一些內容</h4>
					<h4>一些內容</h4>
					<h4>一些內容</h4>
					<button @click="isShow = false">關閉彈窗</button>
				</div>
			</div>
		</teleport>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
</script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

結果展示：

使用Teleport-案例結果.gif

未使用Teleport-案例結果.gif

本人其他相關文章連結

1.《vue3第五章》新的元件，包含：Fragment、Teleport、Suspense
2.vue3知識點：Teleport元件
3.vue3知識點：Suspense元件