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

时间:2018-08-27 12:27:17

标签: javascript vue.js vuejs2

我几次遇到相同的情况,想知道我想念的是什么。

让我们说我想创建一个包含一个列表(为简单起见,一个待办事项列表)和一个用于将待办事项插入到列表中的输入字段的组件。 现在,我想从父组件访问此列表。

确保使用事件通知父项列表中的任何更改,导致他同步维护其自己的列表不是一个好方法,我应该找到一种方法来绑定到同一列表。< / p>

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

我能想到的最佳解决方案是处理子组件中的列表,并在发生任何更改时,通过引用列表向父级发送更改事件(与输入字段的更改事件相同),但是我不确定这是否是最理想的方法。

任何想法如何解决该问题?听起来很普通,尽管我在网上找不到任何好的解决方案。

编辑:刚刚阅读了有关同步修饰符的信息,该修饰符听起来很接近我的期望。想知道这是否是一个好用例...

1 个答案:

答案 0 :(得分:-1)

我不完全了解Vue,但是在角度上我们可以像这样使用绑定:

document.addEventListener("DOMContentLoaded", function()

在子组件中:

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