uni-app组件之间的通讯–父子/兄弟组件之间传递数据
e
m
i
t
、
emit、
emit、on、
o
f
f
常
用
于
跨
页
面
、
跨
组
件
通
讯
u
n
i
.
off常用于跨页面、跨组件通讯 uni.
off常用于跨页面、跨组件通讯uni.emit(eventName,OBJECT) 触发全局的自定事件。
uni.
o
n
(
e
v
e
n
t
N
a
m
e
,
c
a
l
l
b
a
c
k
)
监
听
全
局
的
自
定
义
事
件
。
事
件
可
以
由
u
n
i
.
on(eventName,callback) 监听全局的自定义事件。事件可以由 uni.
on(eventName,callback)监听全局的自定义事件。事件可以由uni.emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
uni.$off([eventName, callback]) 移除全局自定义事件监听器
一、父组件给子组件传递数据
子组件通过props接收外界传递到组件内部的值
// 父 index.vue 通过属性绑定进行传递 v-bind:简写为:
data() {
return {
title:‘Hello’,
}
},
// 子组件 test.vue 通过props接收
这是父组件传递过来的数据{{title}}
export default {
props:['title'],//接收
}
二、子组件向父组件传值
通过$emit触发事件进行传递参数
// 子组件 test.vue 传值num
子组件点击按钮触发给父组件传值
<button @click=“sendNum”>给父组件传值
// index.vue 父组件接收num
<test :title=“title” @myEven= ‘getNum’>{{num}}
export default {
data() {
return {
num:0,//默认0
}
},
methods: {
getNum(num){
console.log(num)
this.num = num
}
},
}
三、兄弟组件之间通讯
a.创建组件a,b,引入index.vue, components注册
// index .vue 页面展示组件内容
b.通过uni. o n 注 册 一 个 全 局 监 听 事 件 , 通 过 u n i . on注册一个全局监听事件,通过uni. on注册一个全局监听事件,通过uni.emit触发全局监听事件
//a组件 a.vue
<button @click=“addNum”>修改b组件数据
//b组件 b.vue a组件更改该组件内容
数据{{num}}