Kami telah memutuskan untuk beralih secara beransur-ansur dari kalah mati ke api gubahan vue 3 menggunakan skrip taip, dan saya cuba memahami anti-corak prop yang bermutasi. Saya mempunyai komponen berfungsi yang melakukan tugas yang dimaksudkan, tetapi pada asasnya saya ingin mengesahkan bahawa cara ia ditulis adalah pendekatan yang disyorkan.

Contoh yang agak mudah ialah komponen senarai kotak semak dengan togol padanya:

Soalan terbesar saya ialah jika apa yang saya lakukan dalam AppList.vue adalah betul, saya sedang melakukan const internalModel = toRef(props.selected ?? []); Pembolehubah yang tidak tersedia dalam komponen dan selectedHandler - peristiwa dan toggleSemua ;Model Dalaman Menggunakan dua pembolehubah untuk perkara yang sama terasa menyusahkan, tetapi pada masa yang sama ia masuk akal kerana model dalaman tidak perlu mengganggu pandangan.

Saya tahu terdapat contoh di vuejs.org di mana anda boleh menggunakan tatasusunan pada v-model untuk mewakili berbilang kotak pilihan, tetapi ia tidak berada di dalam komponen atau sebagai prop, jadi ia Tidak betul-betul sama, ini terasa lebih rumit. Saya menghabiskan sebahagian besar hari cuba untuk membetulkannya tetapi tidak banyak hasil carian vue 3 dan saya tidak menemui sebarang hasil sama sekali untuk masalah khusus ini.

HomeView.vue:

AppList.view: