Teleport & KeepAlive — Vue

Teleport Render konten di tempat lain di DOM tree: ---template--- Buka Modal Ini modal! KeepAlive Menyimpan state komponen yang di-toggle — tidak di-destroy: --

Teleport

Render konten di tempat lain di DOM tree:

---template---
<div>
  <button @click="showModal = true">Buka Modal</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>Ini modal!</p>
    </div>
  </Teleport>
</div>

KeepAlive

Menyimpan state komponen yang di-toggle — tidak di-destroy:

---template---
<KeepAlive>
  <component :is="currentTab" />
</KeepAlive>

Tanpa KeepAlive, state (form input, scroll position) hilang saat tab berganti.

Yang akan kamu pelajari