-
如果需要调用下面自定义组件里面的
clear ()方法，不知道怎么自定义组件去看一下官方文档很详细。 -
自定义组件 .js 文件：
Component({
// 组件的属性列表
properties: {
// 线宽度
lineWidth: {
type: Number,
value: 1,
// 属性变化则调用
observer (e) {
if (this.data.ctx) { this.data.ctx.lineWidth = e }
}
}
},
// 组件的初始数据
data: {
},
// 组件生命周期函数 - 在组件布局完成后执行
ready () {
},
// 组件生命周期函数 - 在组件实例被从页面节点树移除时执行
detached () {
},
// 组件的方法列表
methods: {
// 自定义方法
clear () {
console.log("调用了自定义组件内部方法");
}
}
})
- 例如我的组件名称叫
drawing-board，在正常页面上使用自定义组件：
<drawing-board line-width="10" id="drawing-board"></drawing-board>
- 然后在当前使用页面的 .js 文件里面获取到组件进行调用方法
/**
* 页面的初始数据
*/
data: {
// 当前画板
drawingBoard: undefined
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.drawingBoard = this.selectComponent('#drawing-board')
},
// 调用自定义组件方法
touchClear () {
this.drawingBoard.clear()
},
-
这样就能够成功调用到自定义组件里面的封装方法了。
-
微信小程序 - Component - externalClasses (自定义组件支持外部class或者style样式)
