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
都保持響應(yīng)狀態(tài)(即,它不會被克隆,也不需要 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 Task
ditulis semula seperti berikut:
Vue.component('Task', { template: '#task-template', props: ['list'], model: { prop: 'list', event: 'listchange' }, computed: { listLocal: { get: function() { return this.list }, set: function(value) { this.$emit('listchange', value) } } } })Sifat
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:
<Task v-model="parentList"></Task>
listLocal
計算屬性在組件內(nèi)提供了一個簡單的 getter 和 setter 接口(將其視為私有變量)。在 #task-template
中,您可以渲染 listLocal
并且它將保持反應(yīng)性(即,如果 parentList
更改,它將更新 Task 組件)。您還可以通過調(diào)用 setter(例如
this.listLocal = newList
)來更改 listLocal
, ia akan menghantar perubahan kepada ibu bapa.
Kelebihan corak ini ialah anda boleh menghantar listLocal
kepada komponen anak listLocal
傳遞給 Task
的子組件(使用 v-model
(menggunakan v-model
) dan perubahan daripada komponen anak akan disebarkan ke bahagian atas komponen tahap.
Sebagai contoh, katakan kita ada single EditTask
組件,用于對任務(wù)數(shù)據(jù)進(jìn)行某種類型的修改。通過使用相同的 v-model
和計算屬性模式,我們可以將 listLocal
傳遞給組件(使用 v-model
):
<script type="text/x-template" id="task-template"> <div> <EditTask v-model="listLocal"></EditTask> </div> </script>
Jika EditTask
發(fā)出更改,它將適當(dāng)?shù)卣{(diào)用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 data
props menggunakan props
Vue.component('task', { template: '#task-template', props: ['list'], data: function () { return { mutableList: JSON.parse(this.list); } } });Anda boleh membaca lebih lanjut mengenainya di Panduan Rasmi Vue.js
Nota 1: Sila ambil perhatianAnda tidak sepatutnya tidak prop
untuk prop
dan 使用相同的名稱>data
data: function () { return { list: JSON.parse(this.list) } } // WRONG!!Nota 2: Memandangkan
props
Saya rasa seperti ada kekeliruan berkenaan props dan reaktiviti, saya syorkan anda lihat benang ini??