小程序 父子组件传值方法

一.父组件传值给子组件

子组件child

child.json

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

child.wxml

  <view>从父组件接收到的值：{{paramAtoB}}</view>

child.js

Component({
  properties: {
     paramAtoB: String
  }
})

父组件parent

parent.json

{
  "component": true,
  "usingComponents": {
    "com-component": "/pages/child/child"
  }
}

parent.wxml

<com-component paramAtoB='A传给B的值' />

parent.js

无操作

二.子组件传值给父组件

子组件child

child.json

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

child.wxml

<input type='text' value='{{inputValue}}' bindinput='inputChange'></input>

child.js

inputChange: function (e) {//值改变时的赋值操作
      var val = e.detail.value
      this.setData({
        inputValue: val
      })
      this.triggerEvent('test', { testData: val })//子组件把实时的值传递给父组件
      // console.log(e.detail.value)
    }

父组件parent

parent.json

{
  "component": true,
  "usingComponents": {
    "com-component": "/pages/child/child"
  }
}

parent.wxml

  <com-component bind:test='onTest'/>
  <view>子组件传值父组件测试结果：{{testData}}</view>

parent.js

Page({
  data: {

  },
  onLoad: function () {
    
  },
  onTest:function(e){//子组件传值给父组件的监听事件
    this.setData({ testData: e.detail.testData })
  }
})