小程序组件之间通信

自定义组件-父子组件之间通信

1.父子组件之间通信的3种方式

• 属性绑定
  用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
• 事件绑定
  用于子组件向父组件传递数据，可以传递任意数据
• 获取组件实例
  父组件还可以通过this.selectComponent()获取子组件实例对象
  这样就可以直接访问子组件的任意数据和方法

属性绑定：
用于父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件

//父组件
data:{
  count:0
}
//父组件的xml结构属性绑定
<my-test3 count="{{count}}"></my-test3>

子组件在properties节点声明对应属性并使用

//子组件
properties:{
  count:Number
}
//子组件的xml中
<text>{{count}}</text>

事件绑定:

第一步//父组件定义方法 .js
syncCount(){

}
第二步//在父组件wxml中，通过自定义事件形式，将步骤一的函数引用
两种方式
<my-test3 count="{{count}}" bind:sync1="syncCount"></my-test3>
<my-test3 count="{{count}}" bindsync1="syncCount"></my-test3>
第三步//子组件 .js
methods:{
  addCount(){
    this.setData({
      count:this.properties.count+1;
    })
    //触发自定义事件传递给子组件
    this.triggerEvent('sync1',{value,this.properties.count})
  }
}
第四步//父组件 .js在第一步定义的函数中加个形参接收传过来的数据 
syncCount(e){
  this.setData({
    count:e.datail.value
  })
}

获取组件实例


在父组件里面写

自定义组件-behaviors

在小程序中，用于实现组件之间的代码共享的特性，类似于vue.js中的”minxins“
每个behavior都可以包含一组属性、数据、生命周期和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior，behavior可以相互引用

• 调用Behavior方法可以创建一个共享的behavior实例对象，供所有组件使用
  1.新建一个文件
  
  2.需要使用的地方通过require()导入
  
  3.使用直接在xml中

<view>{{username}}<view>

6.同名字段的覆盖和组合规则
组件和他的引用behavior中可以包含同名字段，处理规则
*** 同名数据字段（data）
如果是object，会进行合并，得到一个大对象
其他会覆盖，组件>父组件behavior>子组件behavior>靠后behavior>靠前behavior
*** 同名属性或方法
*** 同名生命周期

组件-总结