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

目录

一、自定义组件的样式

二、data数据

三、methods方法

四、properties属性


一、自定义组件的样式

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

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

二、data数据

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

javascript 复制代码
data: {
     a:0,
     b:0,
     c:0
  },

三、methods方法

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

javascript 复制代码
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是组件的对外属性,用来接受外界传递到组件中的数据

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

  },
})





<new1 a="10"></new1>
相关推荐
木风未来9 小时前
破解家政维修信任困局:一个小程序如何让家庭服务更透明、更高效
小程序
Java.慈祥11 小时前
速通-微信小程序 5Day
java·微信小程序·小程序·npm
说私域11 小时前
数字围城下的防御与突围:基于私域流量与智能名片商城小程序的用户关系重构研究
小程序·重构·流量运营·私域运营
未来之窗软件服务12 小时前
服务器运维(三十四)小程序web访问慢ssl优化—东方仙盟
运维·服务器·小程序·仙盟创梦ide·东方仙盟
全栈小512 小时前
【小程序】微信小程序slice方法分割无效,单独输出一直为空,这是为什么呢
微信小程序·小程序·数组分割
Light6012 小时前
心智有效性测试小程序 V1.0 产品白皮书——心智结构量化与系统稳定性评估平台
小程序·apache
予你@。13 小时前
uni-app(Vue3)实现自定义 Tab 切换滑块效果(微信小程序)
vue.js·微信小程序·uni-app
说私域13 小时前
数字商超的崛起:基于“链动2+1模式智能名片S2B2C商城小程序”的社交电商生态重构
人工智能·小程序·重构·流量运营
低代码布道师13 小时前
【教培管家】后台订单管理与预约确认
低代码·小程序·云开发
烟囱土著1 天前
如何让相册「动」起来❓看这里❗
微信·微信小程序·小程序