微信小程序组件间传值
一. 微信小程序父组件向子组件传值
1.父组件可以直接传参或者使用数据绑定向子组件动态传递数据
组件在父组件内写法:
<view><!-- 以下是对一个自定义组件的引用 --><my-component inner-text="Some text" numberA='5' numberB='{{dataFieldA}}'></my-component>
</view>
2.子组件
Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {type: String,value: 'default value',},numberA: {type: Number,value: 0},numberB: {type: Number,value: 0}},data: {// 这里是一些组件内部数据},methods: {// 这里是一个自定义方法}
})
3.然后在子组件js的this.properties.innerText.value就可以访问到父组件传进的dataField的值,或者wxml中直接按照data的使用方式{{propname}}来使用
二. 微信小程序子组件向父组件传值
1.子组件在需要传值时,使用triggerEvent传给父组件一个事件( myevent ),并传递想要给父组件的值( sonParam )
this.triggerEvent('myevent', {sonParam: false})
2. 在父组件中,子组件的引用处,通过这个myevent事件绑定一个方法( onMyEvent )
<customSelector bind:myevent="onMyEvent">
3.在父组件的js中,定义这个方法onMyEvent,在这个方法内就可以获取到子组件传递过来的值了
onMyEvent: function(e) {let sonParam = e.detail.sonParam
}
三. 微信小程序父组件调用子组件的方法
1.在子组件的里的methods里定义一个方法
// components/header/header.js
Component({properties: {},data: {},methods: {getrun() {console.log('我是子组件的方法')},}
})
2.在父组件的调用里定义一个id唯一标识
按钮用来获取子组件的方法
<header id="header"></header>
<button bindtap="getson">获取子组件的方法</button>
getson() {var header = this.selectComponent("#header")console.log(header.data) //子组件的数据header.getrun() //子组件的方法},
微信小程序组件间传值相关推荐
- 微信小程序组件间通信(二)
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作 注:子组件向父组件中传递通过事件传递操作 通过事件参数对象det ...
- 微信小程序 服务器触发事件,微信小程序组件间通讯与事件
##组件间通讯与事件 一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.(如果仅仅只需要复用UI可使用template)下面介绍父子组件的数据传递方法,以及一个 ...
- 微信小程序页面间传值
1. 通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数 // 源页面A相关代码 wx.navigateTo({url: " ...
- 微信小程序页面间传值方法
1 通过data-*属性传值 console.log(e.currentTarget.dataset) 实例:data- 是固定的写法,-后面的名字可以随便起字母或英文,但获取的时候要写对应名称. v ...
- 微信小程序组件与页面互相传值
微信小程序组件与页面互相传值 1.外界对组件内部传值(父传子) 组件properties属性的应用 ① 定义组件内部要接受外部的值 ② 定义页面要传输给组件内部的值 ③ 传输数据 ④ 组件内部对pro ...
- 微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...
- 微信小程序 组件与页面的传参、方法调用(二)
微信小程序 组件与页面的传参.方法调用 使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了 首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
- 详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式 在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存 将要存储的数据使用以下方法放入缓存 wx.setStorag ...
- 微信小程序直播间开发抽红包功能
1.前言 微信小程序直播间开发抽红包功能 微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播实现用户互动与商品销售的闭环,无需任何的跳转,提高下单转化率,直播更是成为链接商家和消费者 ...
- 微信小程序组件库开发记录
微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...
最新文章
- 实战 | 深度学习轻松学:如何用可视化界面来部署深度学习模型
- 机器翻译Seq2Seq模型的启发-人工神经网络系统-诞生
- 关于Cocos2d-x中精灵节点的透明度的设置
- windows环境下封装条件wait和signal
- js 只准输入数字_js验证如何限制文本框只能输入数字
- caffe 使用cudnn 加速报错
- win11退回win10一直黑屏转圈怎么办 win11退回win10黑屏转圈的解决方法
- 中英文对照 —— 生物学基本概念
- Docker-mysql 安装
- 悄悄安装vcredist_x64.exe,不弹出对话框
- 海思35系列型号排行_11月手机性能排行榜:小米10至尊纪念版排名第三
- Statements must be separated by newlines or semicolons
- 鲍斯科机器人_芜湖鲍斯柯机器人有限公司、上海富治机械科技有限公司服务合同纠纷二审民事判决书...
- 前端标注软件-pxcook像素大厨使用心得
- linux装中文字库,对linux安装中文字体库
- button图片与文字的布局
- B端产品的筛选场景调研与设计优化实践
- 树莓派+android+盒子,树莓派3安装Android TV系统图文教程
- 改进的判定条件覆盖讲解和真值表书写
- C++ Primer Plus(三)编程练习