1、组件也有它的生命周期(lifetimes)
自小程序基础版本2.2.3起,组件的生命周期可以在lifetimes字段中声明(这是推荐的方式,优先级最高)
lifetimes: {
created: function () {
// 组件实例化,但节点树还未导入,因此这时不能用setData
},
attached: function () {
// 在组件实例进入页面节点树时执行
// 节点树完成,可以用setData渲染节点,但无法操作节点
},
ready: function () {
// 组件布局完成,这时可以获取节点信息,也可以操作节点
},
move: function () {
// 组件实例被移动到树的另一个位置
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
2、组件内使用父页面定义的样式(externalClasses)
组件js内先引用:
externalClasses: ['out_class'], // 引用父页面定义的class名
组件html中使用:
{{item.txt}}
父页面中:
.txtColor{
color: purple;
}
3、组件中数据监听(observers)
3.1监听传过来数据
properties: {
testData: {
type: String,
observer: function(a, b){
console.log('数据1:', b)
console.log('数据2:', a)
}
}
},
3.2监听data中的数据
observers: {
'oberser_data'(data){
console.log('数据发生了变化', data)
},
'oberser_data.newVal'(data) { // 无用,监听不到
console.log('第二个数据发生了变化', data)
}
},
/**
* 组件的初始数据
*/
data: {
oberser_data: '初始数据',
oberser_data2: {
'newVal': '深度数据'
}
},
methods: {
onNav(e) {
this.setData({
oberser_data: '改变的数据',
["oberser_data2.newVal"]: '第二个改变的数据'
})
}
}
4、父子组件通信
父组件:
子组件在properties中接收name:properties:{name: {type:String,value:’’}}
然后子组件通过this.data.name就可以使用了
子组件中:click: function(e) {
var val = e.detail.value
var myEventData = {val: val}
this.triggerEvent(‘myEvent’,myEventData )
}
父组件中:onTest: function(e) {
this.setData({value: e.detail.val})
}
5、获取组件实例对象
获取到了组件实例对象this.selectComponent(“#id)
调用组件实例中的方法this.selectComponent(“#id).fun()
6、抽象组件(具体可以看我另一篇文章,用抽象组件写瀑布流页面)
父页面:
this.masonryListComponent = this.selectComponent('#masonry');
this.masonryListComponent.start(items).then(() => {
console.log('refresh completed')
})
子组件:
“componentGenerics”: {
“masonry-item”:true
}