Cách phát ra các sự kiện để giao tiếp giữa các thành phần Vue
Việc cấu trúc các ứng dụng web của bạn bằng cách sử dụng kiến trúc thành phần giúp dễ dàng xây dựng và bảo trì ứng dụng của bạn.
Phát ra các sự kiện tùy chỉnh là một cách bạn có thể xử lý giao tiếp giữa các thành phần; đạo cụ và máy đánh bạc là hai thứ khác. Các sự kiện tùy chỉnh cho phép bạn gửi dữ liệu từ thành phần con đến thành phần gốc.
Mục Lục
Phát ra các sự kiện từ một đứa trẻ đến cha mẹ của nó
Vue cung cấp rất nhiều tùy chọn để giao tiếp giữa các thành phần. Một cách giao tiếp quan trọng giữa các thành phần là thông qua các đạo cụ. Props cho phép bạn gửi dữ liệu từ các component cha đến các component 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 đến thành phần cha? Vue cho phép bạn phát ra các sự kiện tùy chỉnh từ các thành phần con sang thành phần cha. Quá trình này cho phép thành phần cha sử dụng dữ liệu và chức năng từ thành phần con.
Chẳng hạn, hãy tưởng tượng một thành phần nút có chức năng trả về giá trị sau mỗi lần nhấp. Bạn sẽ cần phát sự kiện đó cho thành phần chính để cho phép thành phần chính cập nhật trạng thái của nó hoặc thực hiện một hành động dựa trên giá trị được trả về.
Quy ước đặt tên cho các sự kiện phát ra tùy chỉnh trong Vue
Trước khi tìm hiểu cách phát ra các sự kiện tùy chỉnh, bạn cần hiểu quy ước đặt tên cho các sự kiện tùy chỉnh trong Vue. Trước khi Vue 3 xuất hiện, các nhà phát triển phải xác định các sự kiện tùy chỉnh với kebab-casengăn cách các từ trong tên bằng ký tự gạch nối.
Giờ đây, 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 các mẫu HTML và trường hợp lạc đà 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 bạn 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 là 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 ra các sự kiện tùy chỉnh từ thành phần con sang thành phần cha mẹ
Có hai cách bạn có thể 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át ra phương thức mà Vue cung cấp. Bạn cũng có thể tận dụng định nghĩaEmits macro có sẵn từ Vue 3.
Phát ra các sự kiện tùy chỉnh trong Vue bằng phương thức $emit
$ phát ra, 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 tải trọng 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:
<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 mã này cho biết cách phát ra một sự kiện tùy chỉnh từ một thành phần con. Đứa trẻ bắt đầu bằng cách khởi tạo một biến post với một chuỗi rỗng.
Thành phần con sau đó liên kết phần tử đầu vào với biến bài đăng 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 bài đăng.
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 bài đăng.
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:
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 mã 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 một bài đăng biến mảng làm tham chiếu phản ứng. Thành phần này sau đó định nghĩa một thêm bài viết chức năng chạy, lấy một bưu kiện lý lẽ. Hàm thêm một bài đăng mới vào mảng postList với xô() phương pháp.
Các @ đã nhấp vào nút trình lắng nghe sự kiện ghi lại sự kiện tùy chỉnh Thành phần con 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ã gắn các v-cho lệnh hiển thị danh sách trong Vue thành phần tử ul để lặp qua mảng postList.
Phát ra sự kiện với MacrodefineEmits
Vue 3 đã giới thiệu định nghĩaEmits macro, định nghĩa 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 của bạn:
<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 mã giữa khối mã ở trên và khối có $ phát ra chức năng.
Trong khối mã này, định nghĩaEmits macro xác định bấm nút sự kiện. Bằng cách gọi macro này, 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 mã định nghĩa một nút bấm chức năng. Hàm này phát ra sự kiện được nhấp vào nút và biến bài đăng 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.
Phần tử nút có một v-on: nhấp chuột lệnh 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.
Các nhà phát triển Vue được hưởng lợi từ kiến trúc dựa trên thành phần
Bạn có thể giao tiếp từ một thành phần con với thành phần cha của nó bằng cách phát ra các sự kiện bằng cách sử dụng phương thức $emit và macrodefineEmits.
Bạn có thể hưởng lợi từ kiến trúc dựa trên thành phần của Vue vì nó cho phép bạn viết mã ngắn gọn, có cấu trúc hơn. Với các khung JavaScript hiện đại như Vue, bạn có thể sử dụng Thành phần web, một tiêu chuẩn web của W3C, để đạt được kiến trúc dựa trên thành phần này.