微信小程序中组件的知识点汇总（lifetimes，externalClasses，observers，selectComponent，componentGenerics。。。）

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中使用：

<view class="out_class">{{item.txt}}</view>

父页面中：

<nav nav="{{navData}}" out_class="txtColor"></nav>

.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、父子组件通信

父组件：<getCode name=”{{name}}” bindmyEvent=”onTest”></getCode>

子组件在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、抽象组件（具体可以看我另一篇文章，用抽象组件写瀑布流页面）

父页面：

<masonry generic:masonry-item="img-box" id="masonry" ></masonry>

this.masonryListComponent = this.selectComponent('#masonry');

this.masonryListComponent.start(items).then(() => {

console.log('refresh completed')

})

子组件：

“componentGenerics”: {

“masonry-item”：true

}

网址：微信小程序中组件的知识点汇总（lifetimes，externalClasses，observers，selectComponent，componentGenerics。。。） https://www.yuejiaxmz.com/news/view/81379

相关内容

【微信小程序】基础篇
微信小程序开发之——WebView
怎样在企业微信中使用小程序？可以给企微客户发送小程序吗？
2023年心理咨询师个人成长小组知识点汇总.doc
小程序 const moment = require('moment')
java基于微信小程序的美食制作教程系统 uniapp 小程序
“永辉生活”微信小程序实现的智慧零售体验！
微信小程序项目实例——今日美食
生活小知识的汇总
【2024届微信小程序经典案例】基于生活小助手小程序的设计与实现

随便看看