vue组件通信----子传父(超级详细)
发布日期:2022-03-15 19:30:48 浏览次数:3 分类:技术文章

本文共 658 字,大约阅读时间需要 2 分钟。

Vue传值

简单描述

父组件通过绑定自定义事件,接受子组件传递过来的参数

子组件通过$emit触发父组件上的自定义事件,发送参数

子传父具体实现步骤

  1. 父组件通过$on监听事件,事件处理函数的参数则为接收的数据
  2. 子组件通过$emit可以触发事件,
  3. 第一个参数为要触发的事件,第二个事件为要传递的数据
  4. sync修饰符:对一个 prop 进行双向绑定

自定义事件

子组件需要以某种方式,例如点击事件的方法来触发一个自定义事件

将所需要传递的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
父组件 引入子组件–>注册子组件–>引用子组件
在子组件标签上绑定对自定事件的监听

总结:在通信中,无论是子传父或父传子都是有中间介质。子传父的介质是自定义事件,父传子的介质是props中的属性。

代码演示

1.父组件parent代码如下:

父组件通过绑定自定义事件,接受子组件传递过来的参数

2.子组件son代码如下:

子组件通过$emit触发父组件上的自定义事件,发送参数

转载地址:https://blog.csdn.net/weixin_58102387/article/details/122850138 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:vue组件通信----父传子(超详细)
下一篇:vue的修饰符都有哪些(面试题)

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2023年05月23日 01时31分25秒