微信小程序-自定义组件checkbox

一.自定义Coponent组件

公共组件:将页面内公共的模块抽取为自定义组件,在不同页面复用。

页面组件:将复杂页面进行拆分,降低耦合度,有利于代码维护。

可以新建文件夹component放组件:

组件名为custom-checkbox

注册方式公共组件在app.json里面,页面组件在对应页面的json文件里。

  "usingComponents": {
    "custom-checkbox":"./component/custom-checkbox/custom-checkbox"
  }

二.组件的数据定义和方法使用

组件的.js文件里的data用来定义数据,methods用来定义方法。

和页面不同的是,组件的.js文件里里面是Component方法,页面的.js文件使用Page方法。页面文件不需要在methods里面定义function,组件需要。

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isCheck:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    update(){
      this.setData({
        isCheck: !this.data.isCheck
      })
      console.log(this.data.isCheck)
    }
  }
})
相关推荐
丁总学Java6 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域7 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8687 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165028 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦15 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac18 小时前
微信小程序的组件
微信小程序
stormjun19 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck19 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23421 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序