自定义组件

定义组件

myCpn.wxml

<view>
	<view bindtap="handleClick" data-count="{{count}}">头部</view>
	<slot name="slot1"></slot>
	<slot name="slot2"></slot>
	<view>尾部</view>1
</view>

myCpn.json

{
  "component": true,
  "usingComponents": {}
}

myCpn.js

Component({
	properties: {
		name: String,
		age: {
			type: Number,
			value: 11
		},
		info: {
			type: Object,
			value: {
				height: 155
			},
			observer: (val) => {
				this.setData({
					'personInfo.height': val.height
				})
			}
		}
	},
	data: {
		personInfo: {
			height: 177
		},
		count: 1
	},
	options: {
		multipleSlotes: true
	},
	observers: {
		count(val) {
			console.log(val)
		}
	},
	lifeTimes: {
		created() {
			console.log("组件被创建")
		},
		attached() {
			console.log("组件被添加到页面")
		},
		ready() {
			console.log("组件被渲染出来")
		},
		detached() {
			console.log("组件被移除")
		}
	},
	pageLifeTimes: {
		show() {
			console.log("页面显示")
		},
		hide() {
			console.log("页面隐藏")
		},
		resize() {}
	},
	methods: {
		handleClick(e) {
			let count = e.currentTarget.dataset.count
			this.triggerEvent('handleClick', {count})
		}
	},
})

使用组件

index.json

{
	"usingComponents": {
		"my-cpn":"/component/myCpn/myCpn"
	}
}

index.wxml

<view>
	<my-cpn id="my-cpn" bindhandleClick="handleClick">
		<view slot="slot1"></view>
		<view slot="slot2"></view>
	</my-cpn>
</view>

index.js

Page({
	handleClick(e) {
		console.log(e.detail.count)
		let cpn = this.selectComponent("#my-cpn")
		cpn.handleClick()
	}
})