微信小程序 - 调用自定义组件内部方法

• 如果需要调用下面自定义组件里面的 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()
},

• 这样就能够成功调用到自定义组件里面的封装方法了。