微信小程序 父子组件间传参

文件结构

--components
  --son   // 子组件
    --son.js
    --son.json
    --son.wxml
    --son.wxss
--pages
  --father   // 父组件
    --father.js
    --father.json
    --father.wxml
    --father.wxss

1.父组件向子组件传参

father.json

{
  "usingComponents": {
    "son": "../../components/son/son"
  },
  "navigationBarTitleText": "父组件"
}

注意：要使子组件可以在父组件展示需在父组件的json中引入并定义。

father.wxml

<view class="father">
  <view>我是父组件</view>
  <son fatherTOson='我是father向son中传入的参数'></son>
</view>

注意：fatherTOson属性写在son标签上，fatherTOson不是固定的，可以修改其值。

son.js

Component({
  properties: {
    fatherTOson:String
  },
  data: {},
  methods: {}
})

注意：即在son.js的properties中定义父组件要传过来的参数类型
son.wxml

<view>
  <view>我是子组件</view>
  <view>{{fatherTOson}}</view>
</view>

总结： 父组件向子组件传参，实际上就是在父组件中引入子组件的时候，带上一个属性fatherTOson，并且给其赋值，然后子组件通过这个属性名称fatherTOson，获取其值。

2.子组件向父组件传参

son.wxml

<view>
  <view>我是子组件</view>
  <view>{{fatherTOson}}</view>
  <button bindtap='change'>向父中传入参数</button>
</view>

son.js

Component({
  properties: {
    fatherTOson:String
  },
  data: {},
  methods: {
    change:function(){
      this.triggerEvent('myevent', { sonTOfather:'我是son向father中传入的参数'});
    }
  }
})

注意：bindtap='change'定义了一个方法在son.js的methods完成向父组件传值。this.triggerEvent固定不变，myevent是在父组件中定义的方法。sonTOfather是传给父组件的变量名。

father.wxml

<view class="father">
  <view>我是父组件</view>
  <view>{{sonTOfather}}</view>
  <view style="width: 100%;height: 300rpx;"></view>
  <son fatherTOson='我是father向son中传入的参数' bind:myevent="onMyEvent"></son>
</view>

注意：myevent是在父组件中定义的方法；sonTOfather是声明的变量接收子组件的值

father.js

Page({
  data: {
    sonTOfather:'',
  },
  onMyEvent:function(e){
    this.setData({
      sonTOfather: e.detail.sonTOfather
    })
  },
  onLoad: function (options) {   },
})

注意：在father.js中声明变量sonTOfather，用来接收子组件穿来的参数。