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

最新推荐文章于 2024-02-18 10:36:37 发布

Terminal丶句点

最新推荐文章于 2024-02-18 10:36:37 发布

阅读量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

分享到新浪微博

扫一扫

专栏目录

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

10-18

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

微信小程序开发小结

SunShinessx的博客

05-08

1192

最近开发了微信小程序，做个小结，方便后面查阅：一.自定义头部导航：原来默认的头部导航，只能设置字体颜色，背景色，其他不能设置：在page的json文件里面配置：如想自定义导航头，首先需要在app.json里面加上这句：然后自定义导航头组件：一般是fixed定位。所以导航头下面的页面布局，需要设置一个padding-top = 自定义导航头的高度接下来有个坑：就是...

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

微信小程序 - 自定义组件

sinat_39598192的博客

04-28

392

定义在组件的 json 中配置 component：true 在组件的 js 中用 component() 注册组件使用 1、在页面的 json 中引入组件 { "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } 2、页面中应用 `<view>  <component-tag-name inner

微信小程序自定义组件重渲染

wskgxz的博客

12-30

2042

微信小程序自定义组件重渲染，一些可能方法的分析，以及相对合适的解决方案。

【微信小程序】selectComponent得到null分析

Minf的博客

03-27

3220

获取DOM元素失败原因分析

微信小程序 this.selectComponent 返回值为 null 的问题

dizzysunshine的博客

01-18

1万+

this.selectComponent(string) 可以返回所使用组件的实例对象报错原因排查步骤 json 文件中引入了该组件 { "usingComponent": { "header": "../../components/hedader" } } 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式 wxml..

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

01-11

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

微信小程序自定义某些常用组件.zip

01-11

组件间的数据通信主要依靠`props`（属性）进行单向数据流，或使用`Page`提供的`$emit`、`$on`等方法实现父子组件、兄弟组件之间的通信。 5. **生命周期方法**：微信小程序的组件拥有自己的生命周期，包括`attached`...

微信小程序,城市选择组件(基于wepy)

01-27

10. **自定义组件通信**：Wepy支持父子组件通信，通过props传递数据，或者使用$refs进行实例引用，实现组件间的交互。以上就是基于Wepy开发的城市选择组件的一些核心知识点。通过学习和理解这些内容，开发者不仅...

微信小程序自定义导航组件nav头部全面屏设计

08-10

如果需要组件与其他页面或组件进行通信，可以使用微信小程序的`props`属性传递数据，或者利用`Page`对象的`$emit`、`$on`方法实现父子组件间的事件通信。 8. **性能优化**：在实际应用中，考虑到性能，可能需要...

wx小程序-vue中ref的类似方法

黄彪博客

11-05

7035

文章目录文章参考问题描述解决办法 selectComponent 和 selectAllComponents案例说明文章参考 WXS响应事件小程序自定义组件问题描述自己写了一个表单组件，界面完全符合要求，但是，当用户输入完成了之后，如何将用户输入的表单数据返回出来呢？自己想了两种方案：用户每次输入表单，对外暴露一个事件，将组件的所有数据全部暴露出来利用Vue中 ref 的思想，...

原生小程序转uniapp踩坑

最新发布

u013896513的博客

02-18

485

miniprogram-to-uniapp转换后报错

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

墨者阳明

07-22

566

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

小程序 wxs小程序脚本语言

weixin_43294560的博客

06-18

703

一般用来做过滤处理或计算处理使用 (1)使用环境 WXS代码可以编写在wxml文件中的<wxs>标签内.或以.wxs为后缀名的文件内 (2)变量 var声明,不支持let 不支持箭头函数不支持解构赋值不支持对象属性简写 (3)使用导出方式一:创建wsx文件 ... module.exports = { foo: foo, bar: bar, }; module.exports.msg = "some msg"; 方式二:在wsx标

小程序组件传值

wTMnsn的博客

04-13

245

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

微信小程序 自定义组件method中获取data方法

明月千里赴迢遥的博客

01-26

921

微信小程序 自定义组件method中获取data方法

微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值