Official website documents

1.Component constructor

Component({
	behaviors: [],
	properties: { // This property is to accept the data field passed down by the parent component
		myProperty: {
			type: String,
			value: ''
		},
		name: String
	},
	data: {
        obj:[{"id":"1","name":"Junior one"}]
    },
	// Data within components
	observers: {
		//Component data field listener, used to listen for changes in properties and data
		'cardTitle': function(val) {
			console.log('cardTitle:', val)
		},
	},
	lifetimes: {
		// Life cycle function
		created: function() {
			//When the component instance is just created, setData cannot be called at this time
		},
		attached: function() {
			//Data initialization is set here
		},
		moved: function() {
			//Execute when the component instance is moved to another location in the node tree
		},
		detached: function() {
			//Execute when the component instance is removed from the page node tree
		},
	},
	pageLifetimes: {
		// Lifecycle function of the page where the component is located
		show: function() {
			// Page displayed
		},
		hide: function() {
			// Page is hidden
		},
		resize: function(size) {
			// Page size change
		}
	},
	methods: {
		onMyButtonTap: function() {
			this.setData({
				// Updating properties and data is similar to updating page data
			})
		},
		// Internal methods recommend starting with an underscore
		_myPrivateMethod: function() {
			// Here, obj[0].name is set to 'Wang Yiying'
			this.setData({
				'obj[0].name': 'Wang Yi Ying'
			})
		},
		_propertyChange: function(newVal, oldVal) {

		}
	}

})

2.Communication and events between components

this.triggerEvent('myevent', myEventDetail)

1.Parent component
	<i-card card-title="Title"  bindmyevent="myEventListener"></i-card>
Page({
	data: {
		
	},
	onLoad: function () {
		
	},
	myEventListener: function (e) {
		console.log('Click events', e.detail)// When a button is clicked, the value of the data changed by the button will be obtained
	}
})

2.assembly
<view class="com-card">
	<view class="head">{{cardTitle}}</view>
	<button bindtap="onTap2"  name="cnt">Editor 2</button>
	<button bindtap="onTap"  name="cnt">edit</button>
</view>
Component({
	options: {
		multipleSlots: true  // Support multiple slot subnodes in components
	},
	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:"Wang Tianrui I"
			})
		},
		onTap2: function (e) {
			let myEventDetail={
				age:111
			}
			this.triggerEvent('myevent', myEventDetail)
		}
	}
})

3.behaviors are features for code sharing among components , similar to "mixins" or "traits" in some programming languages.

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data, and methods are incorporated into the component, and its lifecycle functions are called at the corresponding time. Each component can refer to multiple behaviors, and behaviors can refer to other behaviors

// 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() {}
	}
})

//In the above example, my behavior is added to the definition of my component, while my behavior includes myBehaviorProperty property, myBehaviorData data field, myBehaviorMethod method and an attached lifecycle function. This will make my component finally contain two properties: myBehaviorProperty and myProperty, two data fields: myBehaviorData and myData, and two methods: myBehaviorMethod and myMethod. When the component triggers the attached life cycle, the attached life cycle function in my behavior and the attached life cycle function in my component will be triggered in turn.

definitionFilter custom component extension 

4.Relationships between components

5.lifetimes

The lifecycle of a component can also be declared in the lifetimes field. It is supported after version 2.2.3, and the previous life cycle put outside is lower than that supported before version 2.2.3.

Component({
  lifetimes: {
    attached: function() {
      // Execute when the component instance enters the page node tree
    },
    detached: function() {
      // Execute when the component instance is removed from the page node tree
    },
  },
  // The following is the old definition method, which can keep the compatibility with the < 2.2.3 basic library
  attached: function() {
    // Execute when the component instance enters the page node tree
  },
  detached: function() {
    // Execute when the component instance is removed from the page node tree
  },
  // ...
})

Special life cycle

Component({
  pageLifetimes: {
    show: function() {
      // Page displayed
    },
    hide: function() {
      // Page is hidden
    },
    resize: function(size) {
      // Page size change
    }
  }
})