微信自定义组件
官网文档
1.Component 构造器
Component({
behaviors: [],
properties: { // 这个properties 是接受父组件传递下来的数据字段
myProperty: {
type: String,
value: ''
},
name: String
},
data: {
obj:[{"id":"1","name":"小一"}]
},
// 组件内部的数据
observers: {
//组件数据字段监听器，用于监听 properties 和 data 的变化
'cardTitle': function(val) {
console.log('cardTitle:', val)
},
},
lifetimes: {
// 生命周期函数
created: function() {
//在组件实例刚刚被创建时执行 此时还不能调用 setData
},
attached: function() {
//数据的初始化在这边设置 这边可以接受到父组件传递过来的值
console.log(this.data.name)
},
moved: function() {
//在组件实例被移动到节点树另一个位置时执行
},
detached: function() {
//在组件实例被从页面节点树移除时执行
},
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
},
methods: {
onMyButtonTap: function() {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function() {
// 这里将 obj[0].name 设为 '王艺颖'
this.setData({
'obj[0].name': '王艺颖'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})2.组件间通信与事件
this.triggerEvent('myevent', myEventDetail)
1.父组件
{{cardTitle}}
Component({
options: {
multipleSlots: true // 在组件中支持多slot子节点的支持
},
properties: {
cardTitle: {
type: String,
value:''
}
},
data:{
name:"sss",
age:21
},
observers: {
'cardTitle': function (val) {
console.log('cardTitle:',val+11)
},
'name': function (val) {
console.log('name:', val + 11)
},
},
methods: {
onTap: function (e) {
this.setData({
name:"王天一"
})
},
onTap2: function (e) {
let myEventDetail={
age:111
}
this.triggerEvent('myevent', myEventDetail)
}
}
})
3.behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其他 behavior
// my-behavior.js
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String
}
},
data: {
myBehaviorData: {}
},
attached: function() {},
methods: {
myBehaviorMethod: function() {}
}
})
// my-component.js
var myBehavior = require('my-behavior')
Component({
behaviors: [myBehavior],
properties: {
myProperty: {
type: String
}
},
data: {
myData: {}
},
attached: function() {},
methods: {
myMethod: function() {}
}
})
在上例中， my-component 组件定义中加入了 my-behavior ，而 my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性， myBehaviorData 、 myData 两个数据字段，和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时，会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。definitionFilter自定义组件扩展
4.relations组件间关系
5.lifetimes
组件的的生命周期也可以在 lifetimes 字段内进行声明。是2.2.3版本之后支持的，而之前的放在外面的生命周期，是低于2.2.3版本前支持的。
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})特殊的生命周期
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})二、案例
自定义组件：card
{{cardTitle}}
json:
{
"component": true
}
js:
Component({
options: {
multipleSlots: true // 在组件中支持多slot子节点的支持
},
properties: {
cardTitle: {
type: String,
value:''
}
},
data:{
name:"sss",
age:21
},
observers: {
'cardTitle': function (val) {
console.log('cardTitle:',val+11)
},
'name': function (val) {
console.log('name:', val + 11)
},
},
lifetimes: {
// 生命周期函数
created: function () {
//在组件实例刚刚被创建时执行 此时还不能调用 setData
},
attached: function () {
//数据的初始化在这边设置
console.log(this.data.cardTitle, '数据')
},
moved: function () {
//在组件实例被移动到节点树另一个位置时执行
},
detached: function () {
//在组件实例被从页面节点树移除时执行
},
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
// 页面被展示
},
hide: function () {
// 页面被隐藏
},
resize: function (size) {
// 页面尺寸变化
}
},
methods: {
onTap: function (e) {
this.setData({
name:"王天一"
})
},
onTap2: function (e) {
let myEventDetail={
age:111
}
this.triggerEvent('myevent', myEventDetail)
}
}
})
父组件
当前日期：{{date}}
json:
{
"usingComponents": {
"i-card":"../../components/card/card"
}
}
js:
const app = getApp();
import _ from '../../utils/underscore.js
import moment from '../../utils/moment.min.js'
Page({
data: {
obj: [{
"id":122,
"name":"小样"
}],
date:""
},
onLoad: function () {
_.map(this.data.obj, function (el) {
console.log(el)
})
//日期插件
this.setData({
date: moment().format("YYYY-MM-DD")
})
},
myEventListener: function (e) {
console.log('点击事件', e.detail)//这个都可以读到组件的按钮，只要加了这个this.triggerEvent('myevent', myEventDetail)。就可以读取到数据的改变
}
})