Trong Vue.js, "teleport" là một tính năng mới giới thiệu từ phiên bản Vue.js 3. Teleport cho phép bạn đặt một phần tử vào một vị trí khác trên DOM mà không cần thay đổi cấu trúc của cây DOM.

Điều này rất hữu ích khi bạn muốn hiển thị một phần tử ở một vị trí nào đó trên trang web mà không cần phải đặt phần tử đó bên trong các thành phần cha. Ví dụ, bạn có thể sử dụng teleport để hiển thị một modal hoặc tooltip ở vị trí mong muốn trên trang web mà không cần phải thêm mã HTML vào các thành phần cha.

Dưới đây là cú pháp cơ bản của teleport trong Vue.js:

<teleport to="selector">
  <!-- Nội dung bạn muốn teleport -->
</teleport>​

Trong đó:

• to: Thuộc tính to xác định vị trí trên DOM mà bạn muốn đặt phần tử. Bạn có thể sử dụng một string selector hoặc một tham chiếu tới phần tử DOM.

Dưới đây là một ví dụ về cách sử dụng teleport để đặt một phần tử modal vào một vị trí khác trên DOM:

<template>
  <button @click="toggleModal">Mở Modal</button>

  <teleport to="body">
    <div v-if="isModalOpen" class="modal-overlay">
      <div class="modal">
        <button @click="closeModal">Đóng Modal</button>
        <p>Nội dung của modal...</p>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    toggleModal() {
      this.isModalOpen = !this.isModalOpen;
    },
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 20px;
}
</style>​

Trong ví dụ này, khi bạn nhấp vào nút "Mở Modal", một modal sẽ được hiển thị ở vị trí mong muốn trên trang, được xác định bởi thuộc tính to của teleport. Khi bạn nhấp vào nút "Đóng Modal" hoặc click ra ngoài modal, modal sẽ biến mất.