---
# System prepended metadata

title: 自訂元件生成位置 teleport
tags: [Vue-六角課程]

---

---
tags : Vue-六角課程
---

# 自訂元件生成位置 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 在區塊中會有些限制，例如區壞分隔兩邊的話

![](https://i.imgur.com/OAXlFKZ.png)

template 因為JS會先行運行左邊的區塊、右邊的區塊將不會運行的到

## ==實用技巧（取代標題、多個）==

- 取代標題跟H1

```htmlembedded=
 <h3>實用技巧（取代標題、多個）</h3>
 <new-title></new-title>
```
- 元件的架構

```htmlembedded=
app.component('new-title', {
    template: `<teleport to="title"> - 新增的標題片段</teleport>
    <teleport to="h1"> - 新增的文字片段</teleport>`
  })
```








