微信小程序组件传值图示过程详解


Posted in Javascript onJuly 31, 2019

A是父组件,B是子组件

父传子

<!-- 父组件A wxml -->
<view>
 <componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>

//父组件Ajson (里面不能有注释)

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
  "componentB": "../../components/son/son"
 }
}
//父组件A js
// view/father/father.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  paramAtoB: "我是A向B传值"
 }
})
<!-- 子组件B wxml -->
<view class="inner">
 {{paramAtoB}}
</view>
//子组件B js
Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
  paramAtoB: {
   type: String,//类型
   value: 'default value'//默认值
  }
 },
 data: {  
 }
})

//子组件B json

{
 "component": true,
 "usingComponents": {}
}

效果

微信小程序组件传值图示过程详解

子传父

<!-- 父组件A wxml -->
<view>
 <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB>
 {{ paramBtoA }}
</view>
// view/father/father.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  paramAtoB: "我是A向B传值",
  paramBtoA: 1122
 },
 onMyEvent: function (e) {
  //通过事件接收
  this.setData({
   paramBtoA: e.detail.paramBtoA
  })
 }
})

//父组件A json (里面不能有注释)

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
  "componentB": "../../components/son/son"
 }
}
<!-- 子组件B wxml -->
<view class="inner">
 {{paramAtoB}}
 <button bindtap='change'>向A中传入参数</button>
</view>

(注意:子组件的方法需要写在methods:{}里面)

//子组件B js
Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
  paramAtoB: {
   type: String,//类型
   value: 'default value'//默认值
  }
 },
 data: {
  
 },
 methods: {
  //触发change事件向A传值
  change: function () {
   this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
  }
 }
})

//子组件B json

{
 "component": true,
 "usingComponents": {}
}

原先效果

微信小程序组件传值图示过程详解

点击按钮之后

微信小程序组件传值图示过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
javascript天然的迭代器
Oct 29 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
You might like
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
详解python的数字类型变量与其方法
2016/11/20 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python通过len函数返回对象长度
2020/10/22 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
将相和教学反思
2014/02/04 职场文书
赔偿协议书范本
2014/04/15 职场文书
七一党日活动总结
2014/07/08 职场文书
党员自评材料范文
2014/12/17 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
庆六一开幕词
2015/01/29 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
董存瑞观后感
2015/06/11 职场文书
2016年春节问候语
2015/11/11 职场文书