7. 组件间的传值

我们要实现一个目标: 在A组件(子组件)中操作一个列表,进而在B组件中这个列表对应显示也发生变化。

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

子组件中定义属性和事件

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

父组件中定义方法接收子组件传来的值

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

image.png

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,217评论 1 12
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,381评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,803评论 2 59
  • 从一直盼望着上亲子时间管理到真正进入教室,坎坷经历了一年时间才进入课程,当天晚上孩子就把第二天的衣服铺成了个“人字...
    于薇阅读 252评论 0 0
  • 从今年年初开始接触RN,刚开始是比较抵触的。我是做iOS开发的。平时研究研究OC研究研究Swift感觉应该没问...
    走在字里行间阅读 1,926评论 0 4

友情链接更多精彩内容