原生小程序 之 父子组件的三种通信

原生小程序 之 父子组件的三种通信

父传子

父亲
<!--pages/info/info.wxml-->
<view>
  <test num="{{num}}"></test>
</view>
// pages/info/info.js
Page({
  data: {
    num:1
  },
})
{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子
<!--component/test/test.wxml-->
<view>
  <view> 子组件 - {{ num }} </view>
</view>

  // component/test/test.js
  Component({
    properties: {
      num:Number
    },
    data: {
    },
    methods: {
    },
  })

• 效果
  

子传父

父亲
<!--pages/info/info.wxml-->
<view>
  <test num="{{num}}" bind:changeNum="changeNum"></test>
</view>
// pages/info/info.js
Page({
  data: {
    num:1
  },
  changeNum(e){
    // console.log("changeNum",e.detail);
    this.setData({
      num:e.detail
    })
  }
})
{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子
<!--component/test/test.wxml-->
<view>
  <view > 子组件 - {{ num }} </view>
  <button bindtap="changeNum">num+1</button>
</view>
  // component/test/test.js
  Component({
    properties: {
      num:Number
    },
    data: {
    },
    methods: {
      changeNum(){
        this.triggerEvent("changeNum",this.data.num + 1)
      }
    },
  })

• 效果
  

父组件 拿子组件的 节点（实力对象，可调用实例对象的方法何数据）

• 使用id 或者 class

父亲
<!--pages/info/info.wxml-->
<view>
  <test id="sonTestID"></test>
  <button bindtap="changeSonShow">修改子组件的 显示隐藏</button>
</view>
// pages/info/info.js
Page({
  data: {
  },
  changeSonShow(){
    this.selectComponent("#sonTestID").setFlag();
  }
})
{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子
<!--component/test/test.wxml-->
<view>
  <view wx:if="{{flag}}"> 我是 flag为true显示 - {{ flag }} </view>
  <view wx:else> 我是 flag为flase显示 - {{ flag }} </view>
</view>
  // component/test/test.js
  Component({
    properties: {
    },
    data: {
      flag:true
    },
    methods: {
      setFlag(){
        this.setData({
          flag: !this.data.flag
        })
      },
    },
  })

• 效果