# 自訂元件生成位置 teleport
## ==Teleport 自訂義元件位置==
假使我們要在DOM元素上面指定自訂義位置就可以這樣方式做
先在要顯示的 div 上賦予 id 一個名稱 例如: target
```htmlembedded=
<div id="target"></div>
```
另外我們將要操作的元件上面賦予 ==teleport== 標籤、並給予 to ='對應ID'
```j
template: `
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{ title }}</h5>
<p class="card-text">{{ content }}</p>
<button type="button" @click="toggle = !toggle">切換元素顯示</button>
</div>
</div>
<!-- teleport 標籤 要指定顯示的位置 -->
<teleport to='#target'>
<div v-if="toggle" class="alert alert-danger"
>被招喚的元素</div>
</teleport>
```
## ==使用限制（錯誤情境）==
template 在區塊中會有些限制，例如區壞分隔兩邊的話
template 因為JS會先行運行左邊的區塊、右邊的區塊將不會運行的到
## ==實用技巧（取代標題、多個）==
- 取代標題跟H1
```htmlembedded=
<h3>實用技巧（取代標題、多個）</h3>
<new-title></new-title>
```
- 元件的架構
```htmlembedded=
app.component('new-title', {
template: `<teleport to="title"> - 新增的標題片段</teleport>
<teleport to="h1"> - 新增的文字片段</teleport>`
})
```
{"metaMigratedAt":"2023-06-16T10:51:02.351Z","metaMigratedFrom":"YAML","title":"自訂元件生成位置 teleport","breaks":true,"contributors":"[{\"id\":\"c05b36ac-d774-4e45-8fc3-5e50c9be5123\",\"add\":1114,\"del\":19}]"}