Luồng dữ liệu một chiều trong Vue

Tất cả các prop tạo thành một ràng buộc một chiều giữa thuộc tính con và thuộc tính cha: khi thuộc tính cha được cập nhật, nó sẽ được truyền xuống con, nhưng không theo chiều ngược lại. Điều này ngăn chặn việc các component con vô tình thay đổi trạng thái của component cha, vốn có thể làm cho luồng dữ liệu của ứng dụng của bạn khó hiểu.

Ngoài ra, mỗi khi component cha được cập nhật, tất cả các prop của component con sẽ được cập nhật với các giá trị mới nhất. Điều này có nghĩa là bạn không nên cố gắng thay đổi một prop bên trong component con. Nếu bạn làm vậy, Vue sẽ hiển thị một cảnh báo trong console.

Thông thường có hai trường hợp khiến người ta muốn thay đổi một prop. Hãy cùng xem xét chúng.

Trường hợp thứ nhất

Prop được sử dụng để truyền một giá trị ban đầu; component con muốn sử dụng nó như một thuộc tính dữ liệu cục bộ sau này. Trong trường hợp này, tốt nhất là định nghĩa một thuộc tính cục bộ trong data, sử dụng giá trị của prop làm giá trị khởi tạo:

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

Trường hợp thứ hai

Prop được truyền dưới dạng giá trị thô cần được chuyển đổi. Trong trường hợp này, tốt nhất là định nghĩa một computed property sử dụng giá trị của prop:

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

Lưu ý

Lưu ý rằng các đối tượng và mảng trong JavaScript được truyền bằng tham chiếu, vì vậy nếu prop là một mảng hoặc đối tượng, thì bất kỳ thay đổi nào bên trong component con đối với đối tượng hoặc mảng đó sẽ ảnh hưởng đến trạng thái của component cha và Vue không thể cảnh báo về điều này. Nên tránh bất kỳ sự thay đổi (mutation) nào đối với các prop, kể cả đối tượng và mảng, vì việc bỏ qua ràng buộc dữ liệu một chiều có thể dẫn đến những kết quả không mong muốn.