我开始了https://laracasts.com/series/learning-vue-step-by-step系列。我在学习Vue、Laravel 和 AJAX时遇到了这个错误：
vue.js:2574 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖。相反，根据props的值使用数据或计算属性。正在变异的props：“列表”（在组件中找到）
我在main.js 中有这段代码
Vue.component('task', {
template: '#task-template',
props: ['list'],
created() {
this.list = JSON.parse(this.list);
}
});
new Vue({
el: '.container'
})
我知道当我覆盖 list 属性时问题出在created() 中，但我是 Vue 的新手，所以我完全不知道如何解决它。任何人都知道如何（并请解释原因）修复它？
这与在 Vue 2 中本地改变 prop 被认为是反模式的事实有关
如果您想在本地更改prop，您现在应该做的是声明一个字段，该字段data使用该props值作为其初始值，然后更改副本：
Vue.component('task', {
template: '#task-template',
props: ['list'],
data: function () {
return {
mutableList: JSON.parse(this.list);
}
}
});
您可以在Vue.js 官方指南中阅读更多相关信息
注1：请注意，您应该不为你使用相同的名称prop和data，即：
data: function () { return { list: JSON.parse(this.list) } } // WRONG!!
Vue公司的模式是props下来events了。这听起来很简单，但在编写自定义组件时很容易忘记。
从 Vue 2.2.0 开始，您可以使用v-model（带有计算属性）。我发现这种组合在组件之间创建了一个简单、干净且一致的接口：
props传递给您的组件的任何内容都保持react性（即，它不会被克隆，也不需要watch在检测到更改时更新本地副本的函数）。计算属性允许分别定义 setter 和 getter。这允许Task组件重写如下：
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)
}
}
}
})
的模型，其属性定义prop相关联v-model，并且该事件将在改变发射。然后，您可以从父级调用此组件，如下所示：
<Task v-model="parentList"></Task>
所述listLocal计算出的属性在组件内提供了一个简单的getter和setter接口（认为它像被一个私有变量）。在#task-template您可以渲染listLocal并且它将保持react性（即，如果parentList更改它将更新Task组件）。您还可以listLocal通过调用 setter（例如this.listLocal = newList）来改变它，它会将更改发送给父级。
这种模式的优点在于您可以传递listLocal给Task(using v-model) 的子组件，并且来自子组件的更改将传播到顶级组件。
例如，假设我们有一个单独的EditTask组件来对任务数据进行某种类型的修改。通过使用相同的v-model计算属性模式，我们可以传递listLocal给组件（使用v-model）：
<script type="text/x-template" id="task-template">
<div>
<EditTask v-model="listLocal"></EditTask>
</div>
</script>
如果EditTask发出改变它会适当地调用set()上listLocal，并由此传播事件到顶层。类似地，EditTask组件也可以使用 调用其他子组件（例如表单元素）v-model。
Vue 只是警告您：您更改了组件中的 prop，但是当父组件重新渲染时，“列表”将被覆盖，您将丢失所有更改。所以这样做是很危险的。
像这样使用计算属性：
Vue.component('task', {
template: '#task-template',
props: ['list'],
computed: {
listJson: function(){
return JSON.parse(this.list);
}
}
});
如果你使用 Lodash，你可以在返回它之前克隆 prop。如果您在父级和子级上修改该props，则此模式很有用。
假设我们在组件grid上有 prop列表。
在父组件中
<grid :list.sync="list"></grid>
在子组件中
props: ['list'],
methods:{
doSomethingOnClick(entry){
let modifiedList = _.clone(this.list)
modifiedList = _.uniq(modifiedList) // Removes duplicates
this.$emit('update:list', modifiedList)
}
}
props下降，事件上升。这就是 Vue 的模式。关键是，如果你试图改变从父级传递过来的 props。它不起作用，它只会被父组件反复覆盖。子组件只能发出一个事件来通知父组件做某事。如果你不喜欢这些限制，你可以使用 VUEX（实际上这种模式会吸收复杂的组件结构，你应该使用 VUEX！）