微信小程序父子组件、兄弟组件通信的封装

最新推荐文章于 2024-04-01 23:07:33 发布

Terminal丶句点

最新推荐文章于 2024-04-01 23:07:33 发布

阅读量1.1k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_40026668/article/details/107689949

版权

本文介绍了微信小程序中父子组件及兄弟组件通信的基础知识，并详细阐述了一种通信的封装实现，包括新建bus.js文件用于事件总线。通过使用封装的方法，可以方便地触发自定义组件如custom-button和custom-input之间的交互。

摘要由CSDN通过智能技术生成

基础支持

父组件获得子组件实例对象

this.selectComponent(selector)
this.selectAllComponents(selector)

子组件触发父组件

this.triggerEvent()

封装实现

新建bus.js文件

module.exports = Behavior({
   
  methods: {
   
    _onBusRelations(e) {
   
      e.detail = e.detail || {
   }
      let options = {
   
        selector: '',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Terminal丶句点

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序组件之间如何通讯

Hdd_whj的博客

04-13

329

1.父传子如何传递： <Dialog-box id="dialog" title="订单信息" content="订单支付内容" /> 如何接收： Component({ ... properties: { //要接收的属性 title:{ //接收的类型 type:String, //接收的默认值 value:"此处应该有一个标题" }, content:{ type:String, value:"此处应该是内容" } }, .... }) 2. 子传父主要通过事件派发，监听模式：

微信小程序父子组件、兄弟组件之前通信和调用

墨者阳明

07-22

559

父组件通过属性传递的方式向 Brother1 组件传递了一个标题，通过事件触发的方式向 Brother2 组件传递了一个消息。方法触发一个自定义事件来向父组件传递消息，父组件在接收到该事件时，再通过 setData 方法将消息传递给 Brother2 组件。父组件可以通过在子组件标签上使用属性来传递参数，子组件可以通过。这里要说一个父组件操作子组件内部Fun的方法，通过。子组件主要通过在触发事件时使用。兄弟组件之间的参数传递可以通过。获取父组件传递过来的参数。方法来向父组件传递参数。

参与评论您还未登录，请先登录后发表或查看评论

Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

10-20

本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。

微信小程序 组件间通信

吴冬雪的博客

03-07

334

参考：组件间通信与事件 | 微信开放文档微信小程序子组件向父组件传值的两个方法_一个前端小白的博客-CSDN博客_小程序子组件向父组件传值

微信小程序的组件通信

R·ZORO的博客

05-12

248

获取子组件实例的对象，这样可以直接访问子组件的任意数据和方法`

微信小程序自定义组件封装及父子间组件传值的方法

10-18

微信小程序是一种不需要下载安装即可...微信小程序中的组件通信对于构建复杂的页面结构和组件化开发至关重要，正确的理解和使用这些传值方法，可以让开发者在开发过程中更高效地解决问题，创造出既美观又实用的页面。

可以实现微信小程序父子组件实时通信的插件

qq_33943287的博客

08-08

229

小程序在组件化开发的时候可能没有达到vue那样的便捷，例如跨组件状态同步等。这个插件可以： 1.通过代理的方式，为小程序添加了跨组件实时通信；父子组件实时同步状态功能； 2.与vue相似的WatchStore功能，监听全局状态的变化； 3.更加简单的引入，还内置了如同Vue中的mixin 功能，将页面中复杂的功能拆解开，使后期维护更加方便； 4.内置了屏幕安全域功能直接方便避免苹果系列手机下方黑条； 5.内置封装的跳转功能可以直接在wxml中实现带参跳转，js带参跳转，封装成为

微信小程序父子组件传值

qq_39131699的博客

04-01

339

父传子小程序的父组件可以是page类型，也可以是component类型，子组件一定是component类型。  <view class="container"> 我是父组件 <child parent="{{parent}}"></child> </view>  <view class="child">我是子组件

微信小程序自定义组件开发.zip

01-11

自定义组件是微信小程序开发中的一个重要特性，允许开发者封装可复用的UI模块，以提高代码的重用性和可维护性。自定义组件有自己的属性、事件和生命周期，可以像原生小程序组件一样在页面中自由组合和使用。 2. **...

微信小程序自定义组件：组件间通讯

sayyy的专栏

04-18

783

略

微信小程序 组件间通信与事件

qq_35262929的博客

11-10

1278

微信小程序 组件间通信与事件

小程序 组件通信

m0_73461567的博客

01-10

304

小程序 组件通信：自定义组件有自已的作用域，可以使用组件通信完成父子组件之间的数据传递。父传子1.父组件通过属性赋值为子组件传递数组2.子组件通过properties节点接收父组件数据注意：子组件可以直接修改父组件传递的数据，不会影响修改到父组件，没有单向数据流限制3.查看或调试传入组件的数据与页面数据的查看方式不同，具体查看如下图所示：说明：选中要查看的组件，通过右侧面板查看。

总结：微信小程序中跨组件的通信、状态管理的方案

最新发布

笔记、经验、日常分享

04-01

801

根据项目复杂程度,可以选择合适的方案。全局数据适合简单场景,第三方库和Remax适合复杂的大型应用。合理的状态管理有助于提高代码的可维护性。Remax借助React生态，可以使用React Context API、Redux等状态管理方案。等,可以模仿React/Vue等框架的Flux/Redux模式。，在需要的页面引入该实例即可访问和修改全局状态。通过事件机制可以实现父子组件、兄弟组件的通信。使用第三方状态管理库如。

微信小程序中组件间通信的三种方式

m0_52889702的博客

08-21

5232

创建一个项目够修改目录下的app.json，在pages中注册页面，同时新增test1组件也在app.json中注册为全局组件并命名为my-testapp.json 配置。

小程序-兄弟传值

前端的路上

03-01

1862

使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就是想要的状态和值 1、创建公共组件child，child2,父组件index 在父组件中index.wxml <child1 bind:parentReceive="parentCallBack"></child1> &l...

微信小程序兄弟组件之间的传值

KenThomas的博客

04-08

8260

微信小程序子父组件之间的传值不难，看文档就行了该文章主要讲兄弟组件之间如何传值其实兄弟组件之间的传值，也是通过触发父级方法，父级方法里setData设置传入另一个组件的值，从而修改另一个子组件的值(似乎有点绕，没事，看看一下代码) app.json声明两个组件 "usingComponents": { "component-test": "pages/component/test/test...

微信小程序父组件、子组件互相调用方法

jjxp2011的专栏

03-27

1037

<my-page id="page"></my-page> #父组件中 this.selectComponent("#page").getData('我是参数'); #子组件methods中 getData(data){ console.log('我是子组件方法',data) }

小程序组件传值

wTMnsn的博客

04-13

245

1、组件、插件、类库、框架组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块插件：通常是为了完成某项具体的业务功能而开发的js文件例如：swiper.js,弹框.js，。。。。类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！例如：jQuery,lodash.js 框架:framework,分是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架 UI框架：boostStrap,Element UI,vant

微信小程序自定义组件封装与父子传值实践

本文将详细介绍微信小程序自定义组件的封装方法以及父子组件间的通信技巧。首先，了解微信小程序中自定义组件的基本流程是关键。为了便于管理，自定义组件通常遵循一定的命名规范，如以`wxzx-`前缀表示，如`wxzx-...