Teleport trong Vue 3

Bài viết này giới thiệu Teleport vue 3 và cùng là một chức năng modal đơn giản

Teleport trong vue 3 là gì?

• <Teleport> là một thành phần tích hợp sẵn trong Vue 3 cho phép chúng ta “teleport” (chuyển đổi vị trí) một phần của template của một thành phần vào một nút DOM tồn tại ngoài cấu trúc DOM của thành phần đó.

• Nó có một prop : to và một default slot hiển thị nội dung vị trí sẽ hiển thị trong phần tử DOM được đề cập ở prop to.
• Disabling Teleport : dùng prop disabled

• Ví dụ làm một modal được viết băng vue 3, ts, tailwind

• Phần <script setup>: Đây là một tính năng mới trong Vue 3 cho phép bạn viết logic component mà không cần phải khai báo các biến và hàm bằng cách sử dụng các khai báo ngắn gọn như ref, defineProps, và defineEmits.
• Import: Dòng import { ref } from ‘vue’; import ref từ thư viện Vue để tạo một ref cho phần tử modal.
• Import CloseIcon : import thành phần CloseIcon file svg nút đóng modal.
• Import useOnClickOutside hàm useOnClickOutside từ một composable (composable là một cách tái sử dụng logic trong Vue) được định nghĩa trong file click-outside.ts. Chức năng này cho phép chúng ta xử lý sự kiện nhấp chuột bên ngoài phần tử modal.

• Define Props: Dòng type TProps = { … }; định nghĩa một kiểu cho các props nhận vào thành phần modal. Props bao gồm show (kiểm soát hiển thị modal), title (tiêu đề modal), textSubmit (văn bản nút submit), và clickToClose (có cho phép đóng modal khi nhấp chuột bên ngoài hay không).
• Define Default Props: sử dụng defineProps để định nghĩa các props và withDefaults để thiết lập các giá trị mặc định cho các props nếu không được cung cấp.
• Define Emits: sử dụng defineEmits để định nghĩa các sự kiện mà thành phần này có thể phát ra, trong trường hợp này là onSubmit và onClose.
• Modal Ref: const modalRef = ref<HTMLElement | null>(null); tạo một ref cho phần tử modal, sẽ được sử dụng trong useOnClickOutside để xác định phần tử bên ngoài modal khi nhấp chuột.
• useOnClickOutside(modalRef, () => { … }); sử dụng composable useOnClickOutside để xử lý sự kiện nhấp chuột bên ngoài phần tử modal. Khi nhấp chuột bên ngoài và clickToClose được bật, sự kiện onClose sẽ được phát ra.

Sử dụng: