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

井眼2024-07-03 22:07

一.自定义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)
    }
  }
})