我们要实现一个目标: 在A组件(子组件)中操作一个列表,进而在B组件中这个列表对应显示也发生变化。
首先,需要明确,我们是把A组件作为一个对象,来包装数据,属性和事件。组件之间的传值可以使用props
列表来实现。
如下所示,我们在TODOItem这个组件中,定义几个用于传递的属性值:content, index
。并使用一个方法handleDelete
来触发传值的操作。在事件中, 使用$emit
实现调用父组件的@delete
标签标注的父组件方法。
子组件中定义属性和事件
在父组件中定义一个将要被子组件调用的方法handleDelete
,这个方法有一个参数index
,后续可以接收子组件传来的值。
父组件中定义方法接收子组件传来的值
在父组件中,使用子组件并获取子组件传值的方法如下所示:
image.png
父组件中使用的todo-list 组件,具有之前定义的属性
content
和index
属性。使用的时候需要以冒号开头,而删除事件则通过标签@delete
传递参数调用了子组件中的handleDelete事件,进而把属性传递给了父组件的删除方法的参数。