自定义组件-父子组件之间通信
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
*** 同名属性或方法
*** 同名生命周期