การไหลของข้อมูลทางเดียวใน Vue

พร็อพทั้งหมดสร้างการเชื่อมโยงทิศทางเดียว ระหว่างคุณสมบัติของลูกและคุณสมบัติของแม่: เมื่อคุณสมบัติของแม่ถูกอัปเดต - มันจะ ถูกส่งต่อไปยังลูก แต่ไม่ใช่ในทางกลับกัน สิ่งนี้ป้องกันไม่ให้คอมโพเนนต์ลูกเปลี่ยน สถานะของแม่โดยไม่ได้ตั้งใจ ซึ่งอาจทำให้เข้าใจ การไหลของข้อมูลในแอปพลิเคชันของคุณได้ยาก

นอกจากนี้ ทุกครั้งที่คอมโพเนนต์แม่ ถูกอัปเดต พร็อพทั้งหมดของคอมโพเนนต์ลูก จะถูกอัปเดตด้วยค่าล่าสุดด้วย ซึ่งหมายความว่า คุณไม่ควร พยายามแก้ไขพร็อพภายใน คอมโพเนนต์ลูก หากคุณทำเช่นนั้น Vue จะแสดงคำเตือนในคอนโซล

โดยทั่วไปมีสองกรณีที่มักจะเกิด ความต้องการที่จะแก้ไขพร็อพ มาดู พวกกัน

กรณีแรก

พร็อพถูกใช้เพื่อส่งผ่าน ค่าเริ่มต้น; คอมโพเนนต์ลูกต้องการ ใช้มันเป็นคุณสมบัติข้อมูลภายใน ในภายหลัง ในกรณีนี้ วิธีที่ดีที่สุดคือกำหนด คุณสมบัติข้อมูลภายในใน data ที่ใช้ ค่าของพร็อพเป็นค่าเริ่มต้น:

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

กรณีที่สอง

พร็อพถูกส่งผ่านมาเป็นค่าแบบดิบ ซึ่งจำเป็นต้องแปลง ในกรณีนี้ วิธีที่ดีที่สุดคือกำหนด คุณสมบัติที่คำนวณได้ (computed property) โดยใช้พร็อพ:

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

หมายเหตุ

โปรดทราบว่าวัตถุและอาร์เรย์ใน JavaScript จะถูกส่งผ่านโดยการอ้างอิง ดังนั้นหาก พร็อพเป็นอาร์เรย์หรือวัตถุ แล้วมีการเปลี่ยนแปลง ภายในคอมโพเนนต์ลูกในวัตถุหรืออาร์เรย์นั้น จะส่งผล ต่อสถานะของคอมโพเนนต์แม่ และ Vue ไม่สามารถเตือนเรื่องนี้ได้ คุณควรหลีกเลี่ยงการกลายพันธุ์ของพร็อพใด ๆ รวมถึงวัตถุและอาร์เรย์ เนื่องจากการเพิกเฉย ต่อการผูกข้อมูลแบบทิศทางเดียวอาจนำ ไปสู่ผลลัพธ์ที่ไม่พึงประสงค์