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

简介: 微信小程序 - 调用自定义组件内部方法
  • 如果需要调用下面自定义组件里面的 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()
},
  • 这样就能够成功调用到自定义组件里面的封装方法了。
相关文章
|
12月前
|
数据安全/隐私保护
陌陌头像留V的最好方法,陌陌最新留QQ号技巧,陌陌动态最聪明的留微信
本资料分享社交平台隐秘留联系方式的方法,包含微信头像艺术化处理、二维码变形术,以及QQ号谐音替换、图片分割等技巧。
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
940 1
微信小程序:轻松实现时间轴组件
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
3095 1
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
1235 0
微信小程序:自定义关注公众号组件样式
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1811 1
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
9月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2398 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
10月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
518 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4267 7