微信小程序开发入门与实战(三种通信方法)

简介: 微信小程序开发入门与实战(三种通信方法)

自定义组件 - 父子组件之间的通信


1、父子组件之间通信的 3 种方式


① 属性绑定


用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父 👉 子

② 事件绑定


用于子组件向父组件传递数据,可以传递任意数据 子 👉 父

③ 获取组件实例


父组件还可以通过 this.selectComponent() 获取子组件实例对象 这样就可以直接访问子组件的任意数据和方法 父 👉 子

2、 属性绑定


属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。父组件的示例代码

如👇

子组件在 properties 节点中声明对应的属性并使用。

WXML<text4data="{{value}}"></text4><view>-----</view><view>这是父组件的值:{{value}}</view>WXJSdata: {
value:18},
组件jsproperties: {
data:Number},
组件WXML<view>这是子组件的值:{{data}}</view>

3、事件绑定


事件绑定用于实现子向父传值,可以传递任何类型的数据。

使用步骤如 👇

① 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

dataAdd(e){
console.log("我被调用了");
},

② 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件

<text4data="{{value}}"bind:dataAdd="dataAdd"></text4><view>-----</view><view>这是父组件的值:{{value}}</view>

③ 在子组件的 js 中,通过调用 this.triggerEvent(‘自定义事件名称’, {name:“this.XXX”}) ,将数据发送到父组件

/***组件的方法列表*/methods: {
DataAdd(){
this.setData({
data:this.properties.data+1      }),
this.triggerEvent("dataAdd",{value:this.properties.data})
    }
  },

④ 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据

dataAdd(e){
console.log("我被调用了");
console.log(e.detail.value);
this.setData({
value:e.detail.value    })
  },

效果如 👇

1.gif

4、 获取组件实例


可在父组件里调用 this.selectComponent(“id或class选择器”) ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(“.XXX 或 #XXX”)。

WXML<text4data="{{value}}"bind:dataAdd="dataAdd"class="text4"></text4><view>这是父组件的值:{{value}}</view><buttonstyle="color: red; margin-top: 26rpx;"bindtap="countAdd">父组件按钮</button>WXJS//父组件获取子组件数据并操作子组件countAdd(){
consttext4=this.selectComponent(".text4")
//text4.setData({
//data:text4.properties.data+1// }),
text4.DataAdd()
},

效果如 👇

2.gif

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png


相关文章
|
22天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
28天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
70 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
26天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
961 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
919 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
270 7
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
111 6
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
335 1

热门文章

最新文章