Cách phát sự kiện giao tiếp giữa các thành phần trong Vue

Phát sự kiện tùy biến là một cách bạn có thể xử lý giao tiếp giữa các thành phần. Dưới đây là hướng dẫn chi tiết cách phát sự kiện giao tiếp giữa các thành phần trong Vue.

Phát sự kiện từ thành phần con tới thành phần gốc của nó

Vue cung cấp rất nhiều lựa chọn giao tiếp giữa các thành phần, nổi bật nhất là qua props. Props cho phép bạn gửi dữ liệu từ thành phần cha tới con.

Điều gì sẽ xảy ra nếu bạn muốn gửi dữ liệu từ thành phần con tới ca? Vue cho phép bạn loại bỏ các sự kiện tùy biến từ thành phần con tới cha. Quá trình này cho phép thành phân cha dùng dữ liệu và hàm từ thành phần con.

Ví dụ, hãy tưởng tượng một thành phần nút bấm chứa hàm trả về một giá trị dựa trên mỗi click. Bạn cần phát sự kiện đó tới thành phần cha hay gốc để cho phép thành phần cha update trạng thái hoặc triển khai hành động dựa trên giá trị được trả về.

Quy ước đặt tên cho các sự kiện được phát tùy biến trong Vue

Trước khi đi sâu vào cách phát các sự kiện tùy biến, bạn cần hiểu về quy ước đặt tên trong Vue. Trước khi Vue 3 xuất hiện, các nhà phát triển phải xác định nghiêm ngặt các sự kiện tùy chỉnh với kebab-case, phân tách các từ trong tên bằng ký tự gạch nối.

Hiện tại, thông lệ tiêu chuẩn là xác định các sự kiện tùy chỉnh của bạn trong kebab-case khi làm việc với mẫu HTML và camelCase khi làm việc với JavaScript. Tuy nhiên, bạn có thể chọn sử dụng bất kỳ tùy chọn nào khi làm việc với JavaScript, vì Vue biên dịch tất cả các sự kiện tùy chỉnh trở lại kebab-case.

Khi phát một sự kiện tùy chỉnh, hãy truyền đạt mục đích của sự kiện bằng một tên mô tả. Điều này rất quan trọng, đặc biệt khi bạn đang làm việc theo nhóm, để làm rõ mục đích của sự kiện.

Cách phát sự kiện tùy biến từ thư mục con tới cha

Bạn có 2 cách hoàn thành việc phát ra các sự kiện tùy chỉnh trong Vue. Bạn có thể phát trực tuyến các sự kiện tùy chỉnh (trực tiếp trong mẫu Vue) bằng phương thức $emit mà Vue cung cấp. Bạn cũng có thể sử dụng macrodefineEmits có sẵn từ Vue 3.

Phát sự kiện tùy biến trong Vue bằng phương thức $emit

$emit, một phương thức Vue tích hợp sẵn, cho phép một thành phần con gửi một sự kiện đến thành phần cha của nó. Bạn gọi phương thức này nội tuyến (trong mẫu của thành phần con) để kích hoạt sự kiện tùy chỉnh. Phương thức $emit nhận hai đối số: tên của sự kiện bạn muốn phát ra và một payload tùy chọn có thể mang dữ liệu bổ sung.

Hãy xem xét thành phần con này phát ra một sự kiện để thông báo cho thành phần cha mẹ về một lần nhấp vào nút:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from 'vue';

const post = ref('')
</script>

<template>
    <div>
        <input type="text" v-model="post">
        <button v-on:click="$emit('button-clicked', post)">Post</button>
    </div>
</template>

Khối code này hiện cách phát một sự kiện tùy biến từ một thành phần con. Thành phần con bắt đầu bằng cách khởi tạo một biến post với một chuỗi trống.

Thành phần con sau đó liên kết phần tử đầu vào với biến post bằng v-model, một chỉ thị liên kết dữ liệu Vue. Liên kết này cho phép những thay đổi bạn thực hiện đối với trường đầu vào để tự động cập nhật biến post.

Phần tử nút có lệnh v-on lắng nghe các sự kiện nhấp chuột trên nút. Bấm vào nút gọi phương thức $emit với hai đối số: tên sự kiện, "đã bấm vào nút" và giá trị của biến post.

Thành phần cha hiện có thể lắng nghe sự kiện tùy chỉnh bằng lệnh v-on để xử lý các sự kiện trong Vue:

<!-- ParentComponent.vue -->
import { ref } from "vue";
import ChildComponent from "./components/ChildComponent.vue";

const postList = ref([])

const addPosts = (post) => {
  postList.value.push(post)
}
</script>

<template>
  <div>
    <ChildComponent @button-clicked="addPosts"/>
    <ul>
      <li v-for="post in postList">{{ post }}</li>
    </ul>
  </div>
</template>

Khối code này minh họa một thành phần chính đang nhập và sử dụng thành phần con từ trước đó. Thành phần cha xác định biến mảng postList làm tham chiếu phản ứng. Sau đó, thành phần này xác định chức năng addPosts chạy, lấy đối số bài đăng. Hàm thêm một post mới vào mảng postList bằng phương thức push().

Trình nghe sự kiện @button-clicked nắm bắt sự kiện tùy chỉnh mà ChildComponent phát ra khi bạn nhấp vào nút. Sự kiện này khiến chức năng addPosts chạy. Cuối cùng, khối mã đính kèm lệnh v-for để hiển thị danh sách trong Vue với phần tử ul để lặp qua mảng postList.

Phát sự kiện với macro defineEmits

Vue 3 đã giới thiệu macro defineEmits, macro này xác định rõ ràng các sự kiện mà một thành phần có thể phát ra. Macro này cung cấp một cách an toàn để phát ra các sự kiện dẫn đến cơ sở mã có cấu trúc hơn.

Đây là một ví dụ về cách bạn có thể sử dụng macrodefineEmits và gọi nó trong thành phần con:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";

const emit = defineEmits(["button-clicked"]);

const post = ref("");

const buttonClick = () => {
  emit("button-clicked", post.value);
};
</script>

<template>
  <div>
    <input type="text" v-model="post" />
    <button v-on:click="buttonClick">Post</button>
  </div>
</template>

Mặc dù chức năng vẫn giữ nguyên, nhưng có sự khác biệt đáng kể trong cú pháp code giữa khối mã ở trên và khối có hàm $emit.

Trong khối code này, macrodefineEmits xác định sự kiện bấm vào nút. Bằng cách gọi macro đó, khối mã trả về hàm $emit, cho phép bạn phát ra các sự kiện đã xác định. Mảng được chuyển đến macrodefineEmits trong thành phần sẽ chứa tất cả các sự kiện bạn cần phát ra cho thành phần chính.

Tiếp theo, khối code xác định chức năng buttonClick. Hàm này phát ra sự kiện được nhấp vào nút và biến post cho thành phần chính. Khối mẫu của thành phần con chứa một thành phần nút bấm.

Phần tử nút bấm có lệnh v-on:click kích hoạt chức năng buttonClick. Thành phần cha sau đó có thể sử dụng thành phần con giống như cách nó đã làm với phương thức $emit.

Trên đây là cách phát sự kiện giao tiếp giữa các thành phần Vue. Hi vọng bài viết hữu ích với các bạn.