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


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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
web.js.字符串与正则表达式操作
May 13 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 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安全性漫谈
2012/06/28 PHP
apache php模块整合操作指南
2012/11/16 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
js倒计时抢购实例
2015/12/20 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
SVG描边动画
2017/02/23 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
图文详解WinPE下安装Python
2016/05/17 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python 整数越界问题详解
2019/06/27 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
django实现类似触发器的功能
2019/11/15 Python
python numpy数组复制使用实例解析
2020/01/10 Python
python3的pip路径在哪
2020/06/23 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
个人求职信范文分享
2014/01/31 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
党日活动总结
2014/05/07 职场文书
五五普法心得体会
2014/09/04 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis