Vue - 将数组从子组件绑定到父组件答案

【问题标题】：Vue - binding an array from child to parent componentVue - 将数组从子组件绑定到父组件
【发布时间】：2018-08-27 12:27:16
【问题描述】：

我曾多次遇到同样的情况，不知道我错过了什么。

假设我想创建一个组件，其中包含一个列表（为简单起见是一个待办事项列表）和一个输入字段，用于将待办事项插入到列表中。现在，我想从父组件访问这个列表。

当然，使用事件通知父级列表中的任何更改，导致他同步维护自己的列表不是一个好的解决方案，我应该找到一种方法来绑定到同一个列表。

第二个糟糕的解决方案是在父级中初始化列表并将其作为道具传递给子级，这也很糟糕，因为我想将列表维护与父级分离以进行抽象。

我能想到的最佳解决方案是在子组件中处理列表，并在任何更改时参考列表向父级发出更改事件（与输入字段的更改事件相同），但是我不确定这是否是最理想的方式。

知道如何解决这个问题吗？听起来很常见，尽管我在网上找不到任何好的解决方案。

编辑：只需阅读听起来与我正在寻找的非常接近的同步修饰符。想知道这是否是一个很好的用例......

【问题讨论】：

Imo，显示数据和获取数据应该分开。让子组件只显示数据，让父组件获取数据并不是一个糟糕的解决方案。
但事实并非如此。我希望孩子获取/修改数据，而父母将其用作 http 请求参数（例如）。因此，孩子和父母都应该使用数据，但我想将其保留在孩子中以用于抽象目的。
在任何一种情况下，都应尽可能以最高级别获取数据，以便轻松填充。如果你想在很多组件之间共享数据，只需使用 VueX。
我不同意你的看法。有时你会想创建一个通用组件，稍后在其他组件中使用它，为了将逻辑保留在这个通用组件中，你必须在这个组件中管理 init 列表（否则你将无法修改它，并且为父级发送事件以修改列表将使您失去通用性优势）
您可以创建一个通用组件来显示数据并让父处理任务以获取数据。在这种情况下，通用组件不关心如何获取数据，因此不依赖 Api。通用组件可能只接受具有给定结构（带有验证）的对象列表。

【解决方案1】：

我不完全了解 Vue，但在 Angular 中我们可以使用如下绑定：

<child-component #getChild></child-component>
<div>{{getChild.message}}</div>
<button (click)="getChild.childMethod()">Call child method</button>

在子组件中：

childMethod() {
  this.message = 'child value';
}

【讨论】：