微信小程序父子组件传值

微信小程序父组件往子组件传值:
父:<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>
通过phone=”{{phone}}”传向子组件
子:

 properties: {
   phone: {            // 属性名
    type: Number,     // 类型(必填),目前接受的类型包括:String, 
  Number, Boolean, Object, Array, null(表示任意类型)
    value: ''     // 属性初始值(可选),如果未指定则会根据类型选 
择一个
    }
  },

然后在methods的自定义函数里面通过this.data.phone就能接收到

子组件往父组件传值:
分为两种情况:1、手动触发获取;2、自动填充
(1)比如子组件中一个输入框的值<input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx' value='{{codes}}'></input>
我们在子组件中的method中定义一个函数:

bindCode: function (e) {
      var that = this;
     var val = e.detail.value; //通过这个传递数据
  var myEventDetail = {
    val: val
  } // detail对象,提供给事件监听函数
  this.triggerEvent('myevent', myEventDetail) //myevent自定义名 
    称事件,父组件中使用
  }

父组件要获取:

bind:myevent="onGetCode"父组件的定义事件(myevent是子组件传递过来的自定义事件名称)
//事件函数 ,e.detail.val就是需要的值

       onGetCode:function(e){
        this.setData({
        code:e.detail.val
      })
    },

(2)还是这个输入框,我们想在子组件中内部处理完数据,就像让输入框自己赋上值,不需要父组件的手动触发。
首先在子组件内部,把处理好的数据赋值给自己内部的data,然后调取自身的传递函数,在传值的时候判断一下,拼接上处理好的数据就可以。
子组件:

 bindCode: function (e) {
  var that = this;
  var val = e.detail.value == undefined ? that.data.codes : e.detail.value;
   //这里针对输入框,判断e.detail.value(是否手动输入了值,没有输入直接赋值处理好的that.data.codes,如果输入了值,就直接使用e.detail.value)传递给父组件
  var myEventDetail = {
    val: val
  } // detail对象,提供给事件监听函数
  this.triggerEvent('myevent', myEventDetail)
}

在处理数据的函数中:

getCode:function(e){
//处理逻辑。。。。
this.bindCode(e) //一定传参数 e
}

父组件获取:

   onGetCode:function(e){
      this.setData({
     code:e.detail.val   //赋值到父组件的data集合
   })
},

小程序的子组件在进行bindinput=”bindCode”时,父组件的bind:myevent=”onGetCode”也被触发了,只不过是在

this.triggerEvent('myevent', myEventDetail)
1
这个代码之前先触发子组件的处理逻辑,然后加上这句就是父组件的事件触发,在这句之后的逻辑是父组件触发后再触发。执行顺序是:子组件—>父组件—->子组件其他逻辑

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,176评论 5 469
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,190评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,232评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,953评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,879评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,177评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,626评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,295评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,436评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,096评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,685评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2 341

推荐阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,720评论 1 12
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,308评论 0 9
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,410评论 1 33
  • 什么样的人风风火火、热情洋溢,有着使不完的精力? 丙火的特性是什么?代表什么样的性格和哪些身体部位? 丙火日干的女...
    曙雀星河阅读 5,116评论 0 4
  • 晚上,接闺女回家。奶奶回老家了,闺女心里有点落寞。我跟她说:“奶奶回家收拾收拾,好准备我们回家过年,不能...
    梓墨麻麻阅读 125评论 0 0