Vue.js 与 v-model 的双向数据绑定答案

【问题标题】：Vue.js two-way data binding with v-modelVue.js 与 v-model 的双向数据绑定
【发布时间】：2019-11-22 19:10:59
【问题描述】：

我一直在阅读有关 v-model 的帖子，但到目前为止，教程一直令人困惑，并没有真正回答我的问题：如何使用 v-model 实现双向数据绑定？

我需要将数据变量绑定到子组件，并且能够从父侧和子侧更改变量的值。我需要在子组件中放入什么代码，这样当我执行<Component v-model="var"> 时，我可以从双方更新var？

为此，我宁愿避免使用存储模式，因为它只是需要共享数据的两个组件。

【问题讨论】：

标签： vue.js

【解决方案1】：

v-model 只是单向数据流之上的抽象。本质上，您的自定义子组件需要做两件事：

所以你的子组件会这样使用：

<child-component :value="myVal" @input="myVal = $event"></child-component>

在上面的代码中，$event 是一个特殊的模板构造，它保存子组件作为事件有效负载的一部分发出的数据。 @input 事件只是简单地更新 myVal 值，该值将再次通过 :value 绑定传递给子组件，因此是单向数据流。

现在，这种模式重复了很多次，以至于 Vue.js 提供了一个简单的 v-model 语法糖，可以用来代替上面的代码。

<child-component v-model="myVal"></child-component>

另外，如果出于某种原因，您不想使用 value 或 input 作为道具和事件，那么您可以使用 model 属性更改它们。这是additional documentation for this。

请注意，如果您使用的是 Redux/Vuex，请避免使用 v-model。对于嵌套数据，您很有可能会陷入边缘情况。

【讨论】：

你有例子吗？上面的解释可能会被多次提及，但我还没有看到将上述概念付诸实践的示例（例如，在父级和子级中修改相同的数组）
我认为codepen 应该会有所帮助：codepen.io/fuxy22/pen/OWKdzY
@tyteen4a03，对于数组，请确保不要使用 push/splice/shift 等可变方法。使用 concat、slice 等不可变方法并始终从子组件发出新数组。

【解决方案2】：

无法使用v-model 进行双向数据绑定，因为您想在更改子组件中的输入时修改默认行为。

您想使用v-bind 显示值并使用v-on:input 将数据传回父组件。

第一行只是一个只读文本。选择下拉菜单是父端数据修改器，文本框来自子组件。

基本上，您希望将数据保存在父端并使用道具将数据传递给子组件。在子组件中，您希望将输入事件传递回父组件以使用$emit 进行处理。

使用父下拉列表更改值将更新该值。从子组件的文本输入中更改值也将如此。如果您输入one、two 或three，父选择下拉菜单也会相应更新。

【讨论】：

【解决方案3】：

【讨论】：