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

目录

一、自定义组件的样式

二、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>
相关推荐
爱折腾的编程老炮3 小时前
潮玩品牌自建抽盒机小程序——商城 + 抽盒 + 一番赏 + 会员 + 社区,一套代码怎么搭
spring boot·小程序·vue·mybatis·uniapp
新知图书3 小时前
第13章 从一句话需求到上线“续费管家”小程序
人工智能·小程序·智能体
数商云企12 小时前
2026年陕西软件开发首选数商云企AI微入口小程序定制方案
人工智能·小程序
bug总结19 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor19 小时前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技1 天前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg1 天前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶1 天前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
CRMEB系统商城1 天前
汽车养护连锁的数字化底座CRMEB 多门店系统实战方案
java·开发语言·小程序·开源·汽车
小马过河R1 天前
微信小程序自定义登录态维护:从入门到生产级落地
后端·微信小程序·小程序·架构·登录态