Data flow trong VueJS Component

Hi các bạn,

Như bài trước của VueJS, ta đã biết về component của VueJS rùi nhé 😀

Nay chúng ta sẽ qua cách trao đổi data giữa các component của VueJS – Data flow trong VueJS Component.

Trong VueJS, ta có 3 hướng trao đổi data như sau:

1. Từ parent => child
2. Từ child => parent
3. Từ component này qua component khác.

Một cái chart nhỏ để các bạn xem trước khi đọc bài 😀

Chúng ta sẽ qua dần các cách này nhé 😀

1/ Truyền data từ parent xuống child

Chúng ta có 2 cách cho thằng này nhé.

1.1/ Prop

Đây là cách cơ bản nhất và cũng là cách được khuyên dùng nhất, với cách này, ta sẽ truyền data vào component con thông qua các attribute (static và binding)

Khai báo prop tại component con:

// cách 1
{
	prop: ['text', 'number'],
	...
}

// cách 2:
{
	prop: {
		text: {
			type: String,
			default: "No string",
		},
		number: {
			type: Number,
			default: 0
		}
	}
}

Truyền data vào component con thông qua các attribute prop đã khai báo:

<your-component :text="textData" number="1"></your-component>

1.2/ Reference

Đây là cách thứ 2, cách này mình coi như là 1 kiểu chơi chiêu :v, tuy nhiên các bạn ko nên phụ thuộc vào cách này nhiều.

Khai báo data tại component con:

data: function() {
		return {
			text: "Hello World from a new Component"
		}
	},

Khai báo ref cho component con ở component cha:

<your-component ref="MyComponent"></your-component>

Access ref và truyền data vào component con:

this.$refs.MyComponent.text = "Set your data here";

Note: với cách này, bạn cũng có thể access cả methods của component con.

2/ Truyền data từ child lên parent

Cũng tương tự như parent xuống child, ta cũng có 2 cách để giải quyết vấn đề này 😀

2.1/ Emit

Đây là cách khuyên dùng từ VueJS khi ta truyền data lên parent. Chúng ta đi theo tuần tự nhé:

Tạo ra một method trong component cha, nhận vào dữ liệu cần thiết và xử lý hay set lại, blah blah…:

{
    methods: {
        setMyData: function(data, data2) {
            // set data or do something afterward
            this.myData = data;
            ....
        }
    }
}

Pass qua cho component con với một tên event nhất định (vd: setMyData), lưu ý là bỏ hàm vào chứ ko gọi hàm nhé:

<child-component @setMyData="setMyData"></child-component>

Tại component con, khi ta muốn gửi data lên lại parent, ta sẽ emit lên với data cần truyền thông qua tên event mà ta đã đặt như sau:

this.$emit('setMyData', this.data1, this.data2); // you can send many data as you want (...)

Mỗi khi mà emit được chạy, hàm setMyData từ parent sẽ chạy và sẽ nhận vào được các data mà dưới children truyền lên 😀

2.2/ Parent property

Đây là 1 cách same same như ref, ta có thể access lên component cha thông qua this.$parent:

this.$parent.text = "Set text for parent";

Với cách này, ta cũng có thể access toàn bộ vào methods cũng như data của parent.

3/ Truyền data từ component qua component

Giữa các component ko có quan hệ cha con với nhau, riêng biệt. Dường như 2 cách trên là impossible để ta có thể trao đổi dữ liệu.

Tuy nhiên các bạn đừng lo, ở cách đó, ta sẽ dùng 1 bên thứ 3 để hỗ trợ ta trao đổi data.

Giả sử mình có 2 component là A và B, muốn truyền từ A qua B nhé.

Tạo ra một Vue instance mới, với tên là eventBus:

const eventBus = new Vue();

Tại component A, để truyền data đi, mình sẽ dùng emit với 1 key nhất định để gửi data đi với eventBus:

eventBus.$emit("your_key_for_emit", this.data1, this.data2); //pass many data as you want

Tại component B, để bắt được lệnh emit, mình sẽ dùng $on với eventBus để bắt:

eventBus.$on(EventHandlerConstant.ON_APPLY_EDITOR_SIDEBAR, function(data1, data2) {
     // set data or do something
     this.myData = data1;
     ....
});

Với 3 bước đơn giản như trên, ta đã có thể truyền data từ component A => B :D. Mỗi khi mà emit của component A chạy, component B sẽ bắt lại được và nhận vào data, từ đó ta có thể sử dụng, xử lý các kiểu 😀

4/ Kết luận về Data flow trong VueJS Component

Đây là những Data flow trong VueJS Component cũng như những cách mà ta có thể trao đổi data giữa các Vue Component với nhau.

Tiếp theo bài sau sẽ là hướng dẫn tạo ra một re-usable component nhé 😀

Cám ơn các bạn đã theo dõi!

# Data flow trong VueJS Component