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

61 阅读2分钟

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,在接收数据的组件中,通过

收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。 img img

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

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!