Vue：子组件不能修改父组件传递的prop值

官方文档

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

结论：父子 prop 之间形成单向数据流，只能通过改变父级组件改变子组件的 prop

那怎么办呢？

三种方法

第一种 emit

我们可以使用$emit方法触发父组件的方法来改变值

// 子组件 close 方法
close() {
     this.$emit("close")
}

<!-- 父组件修改 -->
<HelloWorld :visible="visible" @close="visible = false" />

第二种 value和input

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

等价于：

当用在组件上时，v-model 则会这样：

为了让它正常工作，这个组件内的 <input> 必须：

• 将其 value attribute 绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

第三种 .sync

2.3.0+ 新增

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。