美文网首页工作生活
微信小程序 页面与自定义组件之间的通信

微信小程序 页面与自定义组件之间的通信

作者: 依然_8deb | 来源:发表于2019-07-01 15:55 被阅读0次
<!-- 页面的 json -->
{
  "usingComponents": {
    "my-component": "/components/custom-component"
  }
}

<!-- 页面的 WXML -->
<my-component my-property="{{msg}}"  bindmyevent='change'/> />

<!-- 页面的 js -->
Page({
  data: {
    msg: '我是父组件信息',
  },
change: function (e) {
    this.setData({
      msg: e.detail.val
    })
  }
})

<!-- 组件 custom-component.wxml -->
<custom-component>
  <view>{{myProperty}}</view>
  <view>{{childmsg}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
  <button bindtap='changeParentData'>向父组件传值</button>
</custom-component>

<!-- 组件 custom-component.js-->
Component({
  properties: {
    myProperty: String // 简化的定义方式
  },
data: {
    childmsg:'我是子组件信息'
  },
  methods: {
    _myPrivateMethod: function () {
      this.setData({
         childmsg: '子组件信息改变了',
          myProperty:'父组件信息改变了'
      })
    },
  changeParentData: function () {
      var myEventDetail = {
        val:'子组件改变了父组件的值'
      } // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
  }
})

相关文章

网友评论

    本文标题:微信小程序 页面与自定义组件之间的通信

    本文链接:https://www.haomeiwen.com/subject/fsigcctx.html