Vue 模式是props向下，events向上。听起来很简单，但在编写自定义组件时很容易忘记。

从 Vue 2.2.0 开始，您可以使用v -model（带有计算属性）。我发现这种组合在组件之间创建了一个简单、干净且一致的界面：

• 传递给组件的任何props都保持响应状态（即，它不会被克隆，也不需要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) } } } })

model属性定义关联的prop与v-model，以及更改时将发出哪个事件。然后，您可以从父组件调用此组件，如下所示：

listLocal计算属性在组件内提供了一个简单的 getter 和 setter 接口（将其视为私有变量）。在#task-template中，您可以渲染listLocal并且它将保持反应性（即，如果parentList更改，它将更新Task 组件）。您还可以通过调用 setter（例如this.listLocal = newList）来更改listLocal，它会将更改发送给父级。

此模式的优点在于，您可以将listLocal传递给Task的子组件（使用v-model），并进行更改来自子组件的内容将传播到顶级组件。

例如，假设我们有一个单独的EditTask组件，用于对任务数据进行某种类型的修改。通过使用相同的v-model和计算属性模式，我们可以将listLocal传递给组件（使用v-model）：

如果EditTask发出更改，它将适当地调用listLocal上的set()，从而将事件传播到顶层。同样，EditTask组件也可以使用v-model调用其他子组件（例如表单元素）。

这与以下事实有关：在本地改变 prop 是被认为是 Vue 2 中的反模式

如果您想要在本地改变 prop，您现在应该做的是在data中声明一个使用props 的字段code> value 作为其初始值，然后改变副本：

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!!

注2：自我觉得关于props和reactivity存在一些混乱，我建议您看看此线程