微信小程序自定义组件及父子组件之间的传值

自定义组件component

创建使用组件的步骤。

1. 在组件的json文件中更改 “component”: true。
2. 在使用组件的页面中声明所用组件的名称和路径。

组件构造器主要定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法……

主要在lifetimes中进行生命周期函数的不同阶段的使用。

attached: function () { },//在组件实例进入页面节点树时执行
moved: function () { },//在组件实例被移动到节点树另一个位置时执行
detached: function () { },//在组件实例被从页面节点树移除时执行

组件之间的通信

• 父—>子 props传递
• 子—>父 事件传递
• this.selectComponent方法获取子组件实例对象，操作方法数据。

behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用

组件之间可以通过添加relation字段来定义组件之间的关系，简化组件之间数据等操作的复杂度。

子传父：

子组件里面定义函数，在函数中使用tiggerEvent接收事件，并且发送出去，父组件中通过事件监听监听子组件中的函数，函数中可以访问到子组件中的数据。

子

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {//触发事件的选项
          bubbles:true;
          
      } // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

父

<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})