国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Vue 2 - Amaran tentang menukar prop
P粉818306280
P粉818306280 2023-10-13 10:49:44
0
2
779

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?

P粉818306280
P粉818306280

membalas semua(2)
P粉715274052

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:

  • Sebarang props 都保持響應(yīng)狀態(tài)(即,它不會被克隆,也不需要 watch fungsi yang dihantar kepada komponen mengemas kini salinan setempat apabila perubahan dikesan).
  • Perubahan dihantar secara automatik kepada ibu bapa.
  • Berfungsi dengan pelbagai peringkat komponen.

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 propv-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).

P粉268654873

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 dataprops menggunakan props

sebagai nilai awalnya, kemudian mutasi salinan:

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 propuntuk prop dan 使用相同的名稱>data

, iaitu:

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??
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan