I. Tổng quan
1. Gửi dữ liệu từ Component-cha sang Component-con
|
1 2 3 4 5 6 7 8 9 10 11 |
//Component cha dùng "v-bind" vào thẻ component con để gắn data gửi đi <ChildComponent :child_receive="parent_send"></ChildComponent> //Component con nhận bằng "prop" props: { child_receive: { type: String, required: false, default: "Nothing !!!" } }, |
2. Gửi dữ liệu từ Component-con về Component-cha
2.1. Cách 1: Dùng event
a. Component con truyền data bằng "$emit"
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Kích hoạt sự kiện gửi về paren bằng button <button @click="sendParent">Send To Parent</button> //Param 1 là tên sự kiện: "takeOnChild" //Param 2 là data gửi đi: "this.child_send" methods: { sendParent() { console.log("Start Child Send To Parent !!!"); this.$emit("takeOnChild", this.child_send); console.log("End Send Parent !!!"); } } |
b. Component cha kích hoạt event bằng "v-on", nhận dữ liệu thông qua biến "$event" trong hàm sự kiện
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//TH1: Nhận trực tiếp biến event <ChildComponent @takeOnChild="parent_receive = $event"></ChildComponent> //TH2: Nhận thông qua methods <ChildComponent @takeOnChild="receiveOnChild"></ChildComponent> //Sau đó đọc biến "$event" bằng "parameter" của hàm, trường hợp này là biến data methods: { receiveOnChild(data) { console.log("Parent take Data from Child"); this.parent_receive = data; } }, |
2.2. Cách 2: Dùng callback funtion
a. Component cha gửi callback về cho component con
|
1 2 3 4 5 6 7 8 9 |
//Component cha dùng function callback để set dữ liệu methods: { callbackParent(data) { this.parent_receive = data; } }, //Component cha dùng "v-bind" vào thẻ component con để gắn funtion gửi đi <ChildComponent :child_callback="callbackParent"></ChildComponent> |
b. Component con nhận function callback
|
1 2 3 4 5 6 7 8 9 |
//Nhận function callback thông qua props props: { child_callback: { type: Function, } }, //Set data cho paren thông qua params của funtion callback <button @click="child_callback(child_send)">Send To Parent By Callback</button> |
II. Demo
1. Tại Component cha
-- Tại file ./src/components/ParentComponent.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <div> <input type="text" v-model="parent_send" /> <p>Parent Send: {{ parent_send }}</p> <p>Parent Receive: {{ parent_receive }}</p> <ChildComponent :child_receive="parent_send" :child_callback="callbackParent" @takeOnChild="receiveOnChild" ></ChildComponent> <!-- <ChildComponent @takeOnChild="parent_receive = $event"></ChildComponent> --> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { data: function() { return { parent_send: "123", parent_receive: "0" }; }, methods: { receiveOnChild(data) { console.log("Parent take Data from Child"); this.parent_receive = data; }, callbackParent(data) { this.parent_receive = data; } }, components: { ChildComponent: ChildComponent } }; </script> <style scoped></style> |
2. Tại Component con
-- Tại file ./src/components/ChildComponent.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template> <div> <hr /> <input type="text" v-model="child_send" /> <button @click="sendParent">Send To Parent</button> <button @click="child_callback(child_send)">Send To Parent By Callback</button> <p>Child Send: {{ child_send }}</p> <p>Child Receive: {{ child_receive }}</p> </div> </template> <script> export default { props: { child_receive: { type: String, required: false, default: "Nothing !!!" }, child_callback: { type: Function, } }, data: function() { return { child_send: "xyz" }; }, methods: { sendParent() { console.log("Start Child Send To Parent !!!"); this.$emit("takeOnChild", this.child_send); console.log("End Send Parent !!!"); }, } }; </script> <style scoped></style> |
