Trong nội dung này, tất cả chúng ta cùng khám phá Emit events từ các components con trong Vue, cũng như các events từ các components con lồng nhau. Tất cả chúng ta sẽ làm toàn bộ điều này trong lúc tránh một mô hình anti-pattern thông dụng mà các nhà lớn mạnh Vue thường làm.
Bạn đang xem: Emit là gì
Một định nghĩa chủ chốt đằng sau rất là nhiều fameworks & thư viện JavaScript là khả năng đóng gói dữ liệu & giao diện người dùng bên trong các thành phần mô-đun có thể tái sử dụng. Điều này thật tuyệt khi giúp nhà lớn mạnh tránh lặp lại các đoạn mã trong toàn thể vận dụng. Bên cạnh đó, trong lúc khả năng chứa tính năng bên trong của một components là tuyệt vời, một components thường sẽ cần các phương pháp để có thể giao tiếp với components bên ngoài hoặc rõ ràng và cụ thể hơn là với các components khác.
Tất cả chúng ta có thể gửi dữ liệu xuống từ một component chính thông qua các tính chất. Đây thường là một định nghĩa khá dễ dàng để chớp được. Nhưng những gì có thể xay ra về việc gửi dữ liệu từ một component con sao lưu đến components cha của nó?
Ở Vue, ban đầu tất cả chúng ta gặp một tí khổ cực khi tìm thấy cách thực hiện điều này chủ chốt vì tất cả chúng ta cảm thấy rằng ebook của Vue không bao gồm điều này hoặc có thể khắc phục vấn đề này 1 cách triệt để & Emit data có vẻ có thể khắc phục vấn đề này.
1.Seting
Tất cả chúng ta sẽ sử dụng Vue CLI để mau lẹ seting một số mã soạn sẵn, cũng như toàn bộ những thứ hay ho khác mà nó đem lại, ví dụ như tải lại mô-đun, auto biên dịch, ʋ.ʋ.
Tất cả chúng ta sẽ nỗ lực không dành quá nhiều thời gian để seting, vì trọng điểm bước này là chỉ cho bạn cách phát Emit data, thay vì chỉ cho bạn cách seting từng bước của vận dụng Giỏ hàng.
2.Sự kiện Emit là gì?
Trong trường hợp của các bạn,Emit data mục đích là “phát ra” tín hiệu. Tín hiệu từ một component con để nhắc nhở cho một coponent cha rằng một buổi lễ đã diễn ra (chẳng hạn: một buổi lễ click chuột). Thông thường, component cha sau đó sẽ thực hiện một số loại hành động, ví dụ như thực thi một tính năng.
Tìm hiểu thêm: Charm Là Gì – Vòng Tay Pandora
3. Làm sao để Emit data từ 1 Child Component
Bất kể bao giờ người dùng bấm vào nút Thêm vào giỏ hàng , tất cả chúng ta mong muốn mục được đề cập sẽ được thêm vào giỏ hàng của các bạn. Điều này nghe có lẽ dễ dàng. Điều tất cả chúng ta cũng nên nhớ là, với một vận dụng dựa vào component, mỗi mặt hàng trong cửa tiệm là thành phần riêng của nó (tên của component bước này là Shop-Item). Khi tất cả chúng ta bấm vào nút bên trong Shop-Item.vue, nó cần emit lại dữ liệu về component cha của nó để giỏ hàng được update.
Trước hết ta có đoạn code sau:
!– Shop-Item.vue –>template> div class=”Item”> img :src=”https://ift.tt/326RhWA; :alt=”item.name” class=”ItemImage”> div class=”ItemDetails”> ᴘ>strong>/strong>/ᴘ> ᴘ>Price: strong>$/strong>/ᴘ> /div> button class=”Button”
click=”addToCart(item)”>Add To Cart/button> /div>/template>script> export default { name: “Shop-Item”, props: , data() { return {} }, methods: { addToCart(item) { this.$emit(“update-cart”, item) } } }/script>style>/style>!– App-Item.vue –>template> div id=”app”> section class=”Header”> h1 id=”Fruiticious!”>Fruiticious!/h1> !– Cart component –> shop-cart :cart=”this.cart” :total=”this.total”
empty-cart=”emptyCart”> /shop-cart> /section> !– Item component –> shop-item v-for=”item in this.items” :item=”item” :key=”item.id”
update-cart=”updateCart”> /shop-item> /div>/template>script> export default { name: “app”, data() { return { items: < { id: 205, name: "Banana", price: 1, imageSrc: Banana }, { id: 148, name: "Orange", price: 2, imageSrc: Orange }, { id: 248, name: "Apple", price: 1, imageSrc: Apple } >, cart: <>, total: 0 } }, methods: { updateCart(e) { this.cart.push(e); this.total = this.shoppingCartTotal; }, emptyCart() { this.cart = <>; this.total = 0; } }, }/script>Cùng đi cụ thể hơn đến những sự kiện được đề cập đến.
Tất cả chúng ta có một Button trong Shop-Item.vue:
button class=”Button”
click=”addToCart(item)”>Add To Cartbutton>Mỗi mặt hàng trong cửa tiệm (Banana, Orange, Apple) đều có một nút này. Khi nó được click vào thì buổi lễ
click=”addToCart(item) của các bạn được kích hoạt. Bạn có thể thấy rằng nó lấy item làm tham số (đây là toàn thể đối tượng item đã được truyền vào dưới dạng prop.) Khi nhấn button, nó sẽ kích hoạt tính năng addToCart:
addToCart(item) { this.$emit(“update-cart”, item)}Tất cả chúng ta thấy rằng tính năng này sử dụng this.$emit. Điều đó có nghĩa là gì? Vâng, dễ dàng chỉ là Emit data là gửi một tín hiệu. Trong trường hợp này, tín hiệu là “giỏ hàng cập nhật”, được gửi dưới dạng một chuỗi. Vì thế, về căn bản,this.$emit lấy một string tham số trước hết của nó. Nó cũng có thể chấp thuận một tham số thứ hai, thường sẽ có dạng một số dữ liệu mà tất cả chúng ta mong muốn gửi cùng với nó. Đây có thể là một cái khácstring, một integer, một biến, mộtarray, hoặc trong trường hợp của các bạn, một object.
Nhưng sau đó làm cách nào để gửi các string “update-cart” nhắc nhở component cha của các bạn biết rằng rằng shopping cart được update?
Khi tất cả chúng ta thêm thẻ của mình vào App.vue, tất cả chúng ta cũng thêm một trình lắng nghe buổi lễ tùy chỉnh vào đó để lắng nghe buổi lễ update-cart. Trên thực tiễn, nó thực sự trông giống với trình
click nghe buổi lễ của các bạn trên các nút ” Thêm vào giỏ hàng “.
Tìm hiểu thêm: Hiền Tài Là Gì – Hiền Tài Là Nguyên Khí Quốc Gia
shop-item v-for=”item in this.items” :item=”item” :key=”item.id”
update-cart=”updateCart”>shop-item>Tất cả chúng ta thấy rằng bước này người nghe buổi lễ tùy chỉnh của các bạn đang chờ đợi update-cart được kích hoạt. & làm cách nào để biết bao giờ điều này xảy ra? Khi chuỗi”update-cart”được phát ra từ bên trong Shop-Item.vue!
Cuối cùng là hiện tại hãy xem điều gì xảy ra khi trình
update-cart lắng nghe buổi lễ này & kích hoạt tính năng cập nhật cart:
updateCart(e) { this.cart.push(e); this.total = this.shoppingCartTotal; }Điều này chỉ dễ dàng là lấy một tham số buổi lễ & đẩy nó vào mảngthis.cart. Buổi lễ mà nó mất chỉ dễ dàng là mục mà ban đầu tất cả chúng ta đặt vào làm tham số thứ hai khi tất cả chúng ta gọi this.$emit. Bạn cũng có thể thấy rằng this.totalmmnó cũng được update để trả về kết quả của hàm this.shoppingCartTotal.Như thế, đó là một cách đơn để tất cả chúng ta Emit data từ một component con đến các components cha.
Chuyên đề:
Chuyên đề: Hỏi Đáp
Kiểm soát VUE JS – Component – $emit trong VUE
Video dùng thử về Component & chế độ truyền dữ liệu qua lại giữa các component prop & $emit
Component trong Vuejs, $emit trong Vue js , học vue js Free
SUNTECH là kênh chia sẻ tri thức lập trình Free dành riêng cho mọi đối tượng kể cả những bạn đã đi làm.
Đăng ký kênh để nhận nhắc nhở video tiên tiến nhất từ SUNTECH: https://goo.gl/1ZxwCS
Mục lục video khóa học lập trình Laravel tại SUNTECH
https://www.youtube.com/watch?v=YV25kxBt2Sgu0026list=PLh5At4osX60LuzjTR3NWhAXiFGVRogFoe
vuejs hoc_vuejs suntechvietnam
Mọi cụ thể xin liên hệ:
Name: Phạm Kỳ Khôi
Tin nhắn hộp thư online: daotaolaptrinhsuntech@gmail.com
Phone: 0942 668 586
Zalo: 0942 668 586
Trang web: https://suntech.edu.vn
Fanpage: https://ift.tt/3CjRSAK
Group: https://ift.tt/3kIH0WX
source https://daquyneja.com/wiki/emit-la-gi-emit-la-gi/
0 nhận xét:
Đăng nhận xét