* 可以讓被標簽 Teleport 包裹的組件顯示在父組件外特定的標簽中。
**1. 不使用`Teleport`**
```html
<template>
<div class="demo01">
<div class="demo02">
<div class="demo03"></div>
</div>
</div>
</template>
<!-- 被渲染后,class="demo03"組件默認是被放在class="demo02"的父組件中 -->
<div class="demo01">
<div class="demo02">
<div class="demo03"></div>
</div>
</div>
```
**2. 使用`Teleport`**
```html
<template>
<div class="demo01">
<div class="demo02">
<!-- 將被Teleport包裹的組件放到to指定的父組件外面 -->
<Teleport to="div">
<div class="demo03"></div>
</Teleport>
</div>
</div>
</template>
<!-- 被渲染后,class="demo03"組件被放到最外層的id="app"組件中 -->
<div id="app" data-v-app="">
<div class="demo01">
<div class="demo02">
</div>
</div>
<div class="demo03"></div>
</div>
```
- nodejs
- 同時安裝多個node版本
- Vue3
- 創建Vue3項目
- 使用 vue-cli 創建
- 使用 vite 創建
- 常用的Composition API
- setup
- ref
- reactive
- 響應數據原理
- setup細節
- reactive與ref細節
- 計算屬性與監視
- 生命周期函數
- toRefs
- 其它的Composition API
- shallowReactive與shallowRef
- readonly與shallowReadonly
- toRaw與markRaw
- toRef
- customRef
- provide與inject
- 響應式數據的判斷
- 組件
- Fragment片斷
- Teleport瞬移
- Suspense
- ES6
- Promise對象
- Promise作用
- 狀態與過程
- 基本使用
- 常用API
- async與await
- Axios