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


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 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
完美的php分页类
2017/10/24 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python如何对XML 解析
2020/06/28 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
创建学习型党组织实施方案
2014/03/29 职场文书
工会工作个人总结
2015/03/03 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
python - asyncio异步编程
2021/04/06 Python
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang