15、uniapp组件间通信

uniapp中组件通信和vue组件通信都差不多。只是全局事件总线的方式在uniapp里封装过了。可以不用在vue里注册也可以在组件里使用。

父组件传子组件

这个和vue组件一样,可以用props配置项。

父组件传值:
image

子组件接收:
image

结果:
image


子组件传父组件

就是vue里的自定义事件实现。将回调留在父组件里。子组件调用并传递参数。

父组件定义回调,并给子组件绑定该回调

image

子组件调用并对该函数的参数赋值

image

父组件收到值:

image

也可以父组件通过子组件通过porps传函数给子组件。子组件调用。这样也可以实现。

兄弟组件传兄弟组件

可以参考vue里的全局事件总线。只不过uniapp里自己封装了。提供了方法来实现,不用像vue里需要在vue实例上安装全局事件总线。

参考uniapp官网:API->页面和窗体->页面通讯

uni.$on(eventName,callback)

监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。

eventName:事件名
callback:事件的回调函数

uni.$emit(eventName,OBJECT)

触发全局的自定义事件,附加参数都会传给监听器回调函数。
eventName:事件名
OBJECT触发事件携带的附加参数

A和B是兄弟组件,A组件修改B组件的值,并且将值传过去给B:

B组件定义回调
image

A组件调用并传参
image

posted @ 2022-06-24 20:49  青仙  阅读(1664)  评论(0编辑  收藏  举报