我们要实现一个目标: 在A组件(子组件)中操作一个列表,进而在B组件中这个列表对应显示也发生变化。
首先,需要明确,我们是把A组件作为一个对象,来包装数据,属性和事件。组件之间的传值可以使用props列表来实现。
如下所示,我们在TODOItem这个组件中,定义几个用于传递的属性值:content, index。并使用一个方法handleDelete来触发传值的操作。在事件中, 使用$emit 实现调用父组件的@delete标签标注的父组件方法。

子组件中定义属性和事件
在父组件中定义一个将要被子组件调用的方法handleDelete,这个方法有一个参数index,后续可以接收子组件传来的值。

父组件中定义方法接收子组件传来的值
在父组件中,使用子组件并获取子组件传值的方法如下所示:

image.png
父组件中使用的todo-list 组件,具有之前定义的属性
content和index属性。使用的时候需要以冒号开头,而删除事件则通过标签@delete传递参数调用了子组件中的handleDelete事件,进而把属性传递给了父组件的删除方法的参数。