ฉันต้องทำงานอยู่บน Vue 2 โครงการซักพักและจา upgrading ของเรา linting ความต้องการฉันค้นพบที่เรามี prop การกลายพันธุ์เกิดข้อผิดพลาดในหลากหลายของเด็กส่วนประกอบ ในโครงการของเราเรามองผ่านเป็น singleton วัตถุเป็นอุปกรณ์ประกอบที่จะมีส่วนประกอบและถูกปรับปรับปรุงที่วัตถุงตรงจากเด็กส่วนประกอบ Vue ดูเหมือนจะแนะนำให้ใช้ v-bind.sync คุณสมบัติ สำหรับปรับปรุง props จากเด็กส่วนประกอบ(หรือใช้มพล่ามคำเชยๆออกมาไม่หยุด v-bind แล้ว v-on). เรื่องนี้อย่างไรก็ตามไม่ได้แก้ปัญหาของ prop ทำการแก้ไขจากรอบการส่วนประกอบ ในอาเรย์.
เอาเรื่องนี้(ชั่วโมง)รหัสสำหรับตัวอย่างเช่นนั้นใช้ prop การกลายพันธุ์:
ข้อควรจำ: เดาว่า const sharedObject: { arrayElements: Array<{ isSelected: boolean }> } = ...
หน้า.vue
<template>
...
<Component1 :input1="sharedObject" />
...
</template>
Component1.vue
<template>
...
<template v-for="elem in sharedObject.arrayElements">
<Component2 :input2="elem" />
</template>
...
</template>
Component2.vue
<template>
...
<q-btn @click="input2.isSelected = !input2.isSelected"></q-btn>
...
</template>
อะไรคือคนที่เหมาะสมทางของกำลังปรับปรุงเป็นทรัพย์สินเหมือน input2.isSelected จากรอบการส่วนประกอบใน Vue 2? ทั้งหมดเข้ามาใกล้แล้วผมคิดของเป็นมีข้อบกพร่อง
มีชีวิตที่ยากลำบากเหมือนเข้ามาใกล้แล้ว
ฉัน เชื่อ ว่าเราจะชอบฟองนั่น input2.isSelected มีการแก้ไขอยู่ Component2 ต้อง Page.vueอย่างไรก็ตามนี่ดูเหมือนจะเหมือนกัให้ยุ่งเหยิงรหัสหรือไม่สบายใจรู้สึกนั่นเราเป็นแค่ที่จะข่ม linting เกิดข้อผิดพลาดใน roundabout ทาง
เพื่อแสดงให้เห็น"ยุ่งเหยิงรหัส"วิธีก่อนอื่นโปรดสังเกตว่า Page.vue ยังไม่รู้จักดัชนีของของ elem ใน sharedObject.arrayElements. ดังนั้นเราคงต้องส่งเสีเป็นวัตถุต้อง Page.vue จาก Component1 ซึ่งบรรจุของรัฐ input2.isSelected เช่นกันของดัชนีของ elem ใน sharedObject.arrayElements. มันจะยุ่งยากอย่างรวดเร็ว แล้วเรื่องตัวอย่างที่เราต้อง:
Component1.vue
<template>
...
<template v-for="elem in sharedObject.arrayElements">
<template v-for="elem2 in elem.arrayElements">
<Component2 :input2="elem2" />
</template>
</template>
...
</template>
ในกรณีนี้งั้นเราอาจจะต้องผ่านขึ้นมา 2 indices! มันดูไม่เหมือนเป็นอาศัยอยู่ได้วิธีแก้ปัญหาของฉัน
ทางเลือกนั้นฉันคิดคือเรียกกลับฟังก์ชัน(ผ่านเป็นอุปกรณ์ประกอบผ่านทางส่วนประกอบลำดับชั้นในผังต้นไม้นั่นต้องใช้ฐานข้อมูลองอีลีเมนต์เราต้องการจะปรับปรุงและเป็นสิ่งที่มีคุณสมบัติของเราต้องการจะปรับปรุง(ใช้ Object.assign).
นี่มันทำให้ฉัน มาก ไม่ค่อยดีทุกครั้งตั้งแต่ฉันไม่รู้เหตุผลที่แท้จริงทำไมเราไม่สามารถปรับปรุงขอผ่าน-จา-อ้างอิงถึงอุปกรณ์ประกอบจากเด็กส่วนประกอบ. ฉันมันดูเหมือนมันเป็นแค่ roundabout ทางของกำลังปรับปรุงห้องผ่าน-จาก Component2 โดยไม่มี linter ถึงต้องคอยสังเกตไงล่ะ ถ้ามันมีบางเวทย์มนต์ทำการแก้ไขมันเกิดขึ้นกับพวกอุปกรณ์ประกอบตอนที่พวกเขาเดินผ่านเพื่อเด็กส่วนประกอบแล้วแน่นอนว่าส่งในวัตถุที่ฉันได้รับใน Component2 ที่เรียกกลับฟังก์ชั่นและรุงภาพลักษณ์ที่สมบูรณ์มันอยู่ที่พ่อแม่ส่วนประกอบคงโดยทั่วไปเป็นกำลังปรับปรุงที่อุปกรณ์ประกอบที่เด็กส่วนประกอบ,แต่มันซับซ้อนกว่านั้นแน่
อะไรคือคน ที่เหมาะสม ทางของสู้กับปัญหานี้อยู่ใน Vue 2?