微信小程序 - 调用自定义组件内部方法 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2020-10-14

发布人:葵宇科技

浏览次数:68

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

相关案例查看更多