微信小程序开发---自定义组件的基本使用

目录

一、自定义组件的样式

二、data数据

三、methods方法

四、properties属性

---

一、自定义组件的样式

默认情况下，自定义组件的样式只会对当前组件生效，不会影响组件之外的UI结构。

app.wxss中的全局样式对组件无效，只有class选择器会有隔离效果，其它选择器不受影响，所以建议使用class选择器

二、data数据

在小程序中，用于组件模板渲染的私有数据，需要定义到data节点

data: {
     a:0,
     b:0,
     c:0
  },

三、methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods节点中。

methods: {
     add1(){
       this.setData({
         a:this.data.a+1
       })
     },
     add2(){
       this.setData({
         b:this.data.b+1
       })
     },
     _showcount(){//自定义方法建议以_开头
      //显示弹窗
       wx.showToast({
         title: 'title',
         icon:"none"
       })
     }
  },

四、properties属性

在小程序组件中，properties是组件的对外属性，用来接受外界传递到组件中的数据

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    a:{
      type:Number,
      value:100
    }

  },
})





<new1 a="10"></new1>