vue中组件通信2(自定义事件)

一、 关于事件
两个方面:绑定、触发
二、 自定义绑定监听的方式:
1.v-on
2.使用”$”符号
在这里插入图片描述

三、 实例如下
方法一:(使用 e m i t ) ( 专 门 用 于 父 子 组 件 之 间 的 传 递 ) 比 如 在 A p p . v u e 父 组 件 中 为 < T o d o H e a d e r > 组 件 绑 定 了 数 据 监 听 ” a d d T o d o ” 这 里 使 用 @ a d d T o d o = “ a d d T o d o ” 的 形 式 在 < T o d o H e a d e r > 标 签 中 绑 定 , 然 后 需 要 在 子 组 件 T o d o H e a d e r . v u e 中 进 行 调 用 , 使 用 t h i s . emit)(专门用于父子组件之间的传递) 比如在App.vue父组件中为<TodoHeader>组件绑定了数据监听”addTodo” 这里使用@ addTodo=“addTodo”的形式在<TodoHeader>标签中绑定,然后需要在子组件TodoHeader.vue中进行调用,使用this. emitApp.vue<TodoHeader>addTodo使@addTodo=addTodo<TodoHeader>TodoHeader.vue使this.emit(‘addTodo’,todo)调用,其中‘addTodo’时事件属性名,todo是原本需要传递的参数值

在这里插入图片描述

方法2(使用.$on)
比如在父组件中,需要给组件绑定‘addTodo’的事件监听
在App.vue父组件的mounted()中执行异步代码如下:

ref的作用是为了以下爱的能够获取到TodoHeader属性

 使用this. r e d f s 来 获 取 T o d o H e a d e r 组 件 ( 即 < T o d o H e a d e r > 标 签 对 象 , 再 使 用 redfs来获取TodoHeader组件(即<TodoHeader>标签对象,再使用 redfsTodoHeader<TodoHeader>使on绑定事件监听
 第一个参数‘addTodo’是指定事件名
 第二个参数this.addTodo是获取当前的addTodo回调函数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值