组件的 父子互通传值

xiefandaren

微信开发文档地址：https://developers.weixin.qq.com ... figuration/app.html


教学地址


父-->子

父组件调用

 <isAllowdUser lable="我已经统一用户协议 和 隐私协议" checked="{{isAllowUser}}"></isAllowdUser>

    "isAllowdUser": "./isAllowdUser/isAllowdUser",

子组件骨架

<view class="userAllowdBox">
  <text>{{lable}}</text>
  <checkbox checked="{{checked}}" bind:tap="updataChecked"></checkbox>
</view>

子组件js

  properties: {
    //接受传递属性
    lable: String,
    checked: {
      type: Boolean,
      value: false
    }
  },

  updataChecked() {
      this.setData({
        checked: !this.properties.checked
      })
     // console.log(this.properties.checked);
    }

子-->父


父调用，通过些事件从子组件的发射器拿值

<view>
  <c1 bind:myevent="getData"></c1>
</view>

  getData(e) {
    console.log(e.detail);
  },

子组件数据定义

 data: {
    num: 100
  },

    setData() {
      console.log('传递数据给父组件');
      this.data.num++
      this.triggerEvent('myevent', this.data.num)
    }

this.triggerEvent('myevent', this.data.num)核心就是通过triggerEvent一个方法发射数值给父组件