首頁猿問 Vue 2-變異道具vue-warn

Vue 2-變異道具vue-warn

JavaScript Vue.js

慕容3067478 2019-11-27 10:23:32

我開始了https://laracasts.com/series/learning-vue-step-by-step系列。我停在課程Vue，Laravel和AJAX時遇到了此錯誤：vue.js：2574 [Vue警告]：避免直接更改道具，因為每當父組件重新渲染時，該值就會被覆蓋。而是使用基于屬性值的數據或計算屬性。變異的道具：“列表”（位于component中）我在main.js中有此代碼Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); }});new Vue({ el: '.container'})我知道當我覆蓋列表屬性時問題出在created（）中，但是我是Vue的新手，所以我完全不知道如何解決它。任何人都知道如何（并請解釋為什么）修復它？

查看完整描述

3 回答

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

這與以下事實有關：在Vue 2中將局部更改prop視為反模式

如果要在本地更改prop，現在應該做的是在您的字段中聲明一個data使用該props值作為其初始值的字段，然后對副本進行更改：

Vue.component('task', {

props: ['list'],

data: function () {

return {

mutableList: JSON.parse(this.list);

}

});

您可以在Vue.js官方指南中了解更多有關此內容的信息

注意1：請注意，您不能為prop和使用相同的名稱data，即：

data: function () { return { list: JSON.parse(this.list) } // WRONG!!

注2：由于我覺得有一些混亂關于props和反應，我建議你有一看這個線程

反對回復 2019-11-27

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

Vue只是警告您：您更改了組件中的prop，但是當父組件重新渲染時，“列表”將被覆蓋，您將丟失所有更改。因此這樣做很危險。

改為使用計算屬性：

Vue.component('task', {

props: ['list'],

computed: {

listJson: function(){

return JSON.parse(this.list);

}

});

反對回復 2019-11-27

qq_笑_17

TA貢獻1818條經驗獲得超7個贊

Vue模式props向下和events向上。聽起來很簡單，但是在編寫自定義組件時很容易忘記。

從Vue 2.2.0開始，您可以使用v模型（具有計算屬性）。我發現這種組合在組件之間創建了一個簡單，干凈且一致的接口：

props傳遞給您組件的任何內容都將保持響應狀態（即，它不會被克隆，也不需要watch在檢測到更改時更新本地副本的功能）。

更改會自動發送給父級。

可以與多個級別的組件一起使用。

計算屬性允許setter和getter分別定義。這樣Task就可以按以下方式重寫組件：

Vue.component('Task', {

props: ['list'],

model: {

prop: 'list',

event: 'listchange'

computed: {

listLocal: {

get: function() {

return this.list

set: function(value) {

this.$emit('listchange', value)

}

})

的模型，其屬性定義prop相關聯v-model，并且該事件將在改變發射。然后可以從父級調用此組件，如下所示：

所述listLocal計算出的屬性在組件內提供了一個簡單的getter和setter接口（認為它像被一個私有變量）。在其中#task-template可以進行渲染listLocal，并且它將保持反應性（即，如果進行parentList更改，它將更新Task組件）。您也可以listLocal通過調用setter（例如this.listLocal = newList）進行更改，它將更改發送給父級。

該模式的優點在于，您可以將傳遞listLocal給的子組件Task（使用v-model），并且對子組件的更改將傳播到頂級組件。

例如，假設我們有一個單獨的EditTask組件，用于對任務數據進行某種類型的修改。通過使用相同的v-model和計算的屬性模式，我們可以傳遞listLocal給組件（使用v-model）：

<div>

</div>

</script>

如果EditTask發出改變它會適當地調用set()上listLocal，并由此傳播事件到頂層。同樣，該EditTask組件也可以使用調用其他子組件（例如表單元素）v-model。

反對回復 2019-11-27

3 回答
0 關注
938 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue 2-變異道具vue-warn

Vue 2-變異道具vue-warn

3 回答

添加回答