VUE父子组件之间的传值,以及兄弟组件之间的传值;_vue子组件之间传值

73 阅读3分钟

img img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上物联网嵌入式知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新

如果你需要这些资料,可以戳这里获取

change监听input值的变化,通过

change监听input值的变化,通过emit来连接父组件和子组件之间的事件;transferUser是在父组件连接事件的名称,后面跟上返回的数据;然后在父组件通过getUser获取数据,就这样子传父的过程就完成了…

二、兄弟组件之间的传值
兄弟组件之间的传值和父子组件之间的传值非常相似,都是通过$emit;
原理是:vue一个新的实例,类似于一个站,连接着两个组件,也就是一个中央事件总线;
下面是一个bus实例:
在这里插入图片描述
1、创建一个firstChild组件,引入bus,接着一个按绑定数据传输事件:
在这里插入图片描述

我们通过一个emit自定义一个事件,并传递数据;emit自定义一个事件,并传递数据; emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

下面是另一个组件,引入bus实例,通过一个p标签接收数据:
在这里插入图片描述

这个组件的mounted里,我们监听了userDefinedEvent事件,并把传递过来的事件通过$on监听回调函数;

o

n

:

(

b

u

s

)

on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由

on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。
在这里插入图片描述

接下来就是展示真正的效果的时候了:
在这里插入图片描述

点击之后:
在这里插入图片描述

总结:
1,首先创建一个事件总线,例如bus,作为一个通讯的桥梁;
2,在需要传值的组件中,通过

e

m

i

t

3

emit触发一个自定义事件,并传递参数; 3,在接收数据的组件中,通过

emit触发一个自定义事件,并传递参数;3,在接收数据的组件中,通过on监听自定义事件,并处理传递过来的参数;

另外:
1、兄弟组件之间与父子组件之间的数据交互,两者相比较,兄弟组件之间的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,例如子向父传值也是

e

img img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上物联网嵌入式知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新

如果你需要这些资料,可以戳这里获取