- 如果需要调用下面自定义组件里面的
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() },
- 这样就能够成功调用到自定义组件里面的封装方法了。
