Vue 2 - Amaran tentang menukar prop

Question

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?

Answer 1

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 都保持响应状态（即，它不会被克隆，也不需要 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 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 计算属性在组件内提供了一个简单的 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 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 组件，用于对任务数据进行某种类型的修改。通过使用相同的 v-model 和计算属性模式，我们可以将 listLocal 传递给组件（使用 v-model):

<script type="text/x-template" id="task-template">
    <div>
        <EditTask v-model="listLocal"></EditTask>
    </div>
</script>

Jika EditTask发出更改，它将适当地调用listLocal上的set()，从而将事件传播到顶层。同样，EditTask 组件也可以使用 v-model memanggil komponen kanak-kanak lain (seperti elemen bentuk).

Answer 2

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🎜