微信小程序表单父子相互传值

使用bindinput把表单中的数据进行赋值
父向子传值为属性传值
子向父传值为this.triggerEvent(’ ',{ })

使用form表单
父向子传值为属性传值
子向父传值为this.triggerEvent(’ ',{ })

父向子传值类似于vue中的ref
子向父传值为this.triggerEvent(’ ',{ })
代码如下所示：

<!-- fa.wxml -->
<!-- 父 -->
<form catchsubmit="formSubmit" formType="submit">
  <view style="display: flex">
  <text>父：</text>
  <input placeholder="请输入" name="fa_form" value="{{val}}"/>
  <button formType="submit" size="mini">按钮</button>
</view>
</form>
<!-- 子 -->
<Son id="son_comp" bindsonData="sonData"></Son>

// fa.js
Page({
  data: {
    fa: '',
    val: ''
  },
  // 父组件转换按钮
  bindFather() {
    this.setData({
      fa: this.data.infa
    })
  },
  // 表单form获取值
  formSubmit(e) {
    let {fa_form} = e.detail.value
    // this.selectComponent('#son_comp').inputSon({detail: {value: fa_form}})
    this.selectComponent('#son_comp').setData({
      son: fa_form
    })
  },
  // 子传父值
  sonData(e) {
    this.setData({
      val: e.detail.son
    })
  }
})

<!-- son.wxml -->
<view style="display: flex">
<text>子：</text>
<input bindinput="inputSon" placeholder="请输入" value="{{son}}"/>
<button size="mini" bindtap="bindSon">按钮</button>
</view>

// components/son.js
Component({
  data: {
    son: ''
  },
  methods: {
    inputSon(e) {
      if (e) {
        let son = e.detail.value
        this.setData({
          son
        })
        console.log(this.data.son)
      }
    },
    bindSon() {
      this.triggerEvent('sonData', {son: this.data.son})
    }
  }
})