Saya memulakan siri https://laracasts.com/series/learning-vue-step-by-step. Saya menghentikan kursus Vue, Laravel dan AJAX dengan ralat berikut:
vue.js:2574 [Vue warn]: Elakkan menukar prop secara terus kerana nilai akan ditimpa apabila komponen induk dipaparkan semula. Sebaliknya, gunakan data atau sifat yang dikira berdasarkan nilai prop. Props sedang ditukar: "senarai" (terdapat dalam komponen)
Saya mempunyai kod ini dalam main.js
Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); } }); new Vue({ el: '.container' })
Saya tahu masalahnya adalah dalam dicipta() apabila saya mengatasi sifat senarai, tetapi saya baru menggunakan Vue jadi saya langsung tidak tahu cara membetulkannya. Adakah sesiapa tahu bagaimana (dan sila jelaskan mengapa) untuk membetulkannya?
Mod Vue
props
向下,events
naik. Bunyinya mudah, tetapi mudah dilupakan apabila menulis komponen tersuai.Bermula dalam Vue 2.2.0, anda boleh menggunakan v -model (dengan sifat dikira). Saya dapati gabungan ini mencipta antara muka yang mudah, bersih dan konsisten antara komponen:
props
都保持响应状态(即,它不会被克隆,也不需要watch
fungsi yang dihantar kepada komponen mengemas kini salinan setempat apabila perubahan dikesan).Sifat yang dikira membenarkan penetap dan pengambil ditakrifkan secara individu. Ini membolehkan komponen
SifatTask
ditulis semula seperti berikut:model mentakrifkan
prop
与v-model
yang berkaitan dan peristiwa yang akan dipancarkan apabila ditukar. Anda kemudian boleh memanggil komponen ini daripada komponen induk seperti ini:listLocal
计算属性在组件内提供了一个简单的 getter 和 setter 接口(将其视为私有变量)。在#task-template
中,您可以渲染listLocal
并且它将保持反应性(即,如果parentList
更改,它将更新Task 组件)。您还可以通过调用 setter(例如
this.listLocal = newList
)来更改listLocal
, ia akan menghantar perubahan kepada ibu bapa.Kelebihan corak ini ialah anda boleh menghantar
listLocal
kepada komponen anaklistLocal
传递给Task
的子组件(使用v-model
(menggunakanv-model
) dan perubahan daripada komponen anak akan disebarkan ke bahagian atas komponen tahap.Sebagai contoh, katakan kita ada single
EditTask
组件,用于对任务数据进行某种类型的修改。通过使用相同的v-model
和计算属性模式,我们可以将listLocal
传递给组件(使用v-model
):Jika
EditTask
发出更改,它将适当地调用listLocal
上的set()
,从而将事件传播到顶层。同样,EditTask
组件也可以使用v-model
memanggil komponen kanak-kanak lain (seperti elemen bentuk).Ini ada kaitan dengan hakikat bahawa: Menukar prop secara tempatan dianggap sebagai anti-corak dalam Vue 2
Jika anda ingin memutasi prop secara setempat, perkara yang perlu anda lakukan sekarang ialah mengisytiharkan kod medan>nilai dalam
sebagai nilai awalnya, kemudian mutasi salinan:data
propsmenggunakan props
Nota 1: Sila ambil perhatianAnda tidak sepatutnya tidak
, iaitu:prop
untukprop
dan 使用相同的名称>dataprops
Saya rasa seperti ada kekeliruan berkenaan props dan reaktiviti, saya syorkan anda lihat benang ini🎜