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

目录

一、自定义组件的样式

二、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>
相关推荐
克里斯蒂亚诺更新2 小时前
微信小程序使用vant4 weapp自定义菜单 但是弹出层却被菜单遮挡的解决办法
微信小程序·小程序·notepad++
静Yu2 小时前
从一个九宫格素材小程序,看轻量工具产品该如何优化体验
前端·微信小程序
小羊Yveesss6 小时前
2026年微信小程序制作工具怎么选?
微信小程序·小程序
河北清兮网络科技7 小时前
深度解析:2026石家庄短视频APP开发真实成本、隐性开销与避坑方案
大数据·小程序·app·短剧app·广告联盟
微擎应用8 小时前
宠物门店系统 - 连锁宠物医院多门店小程序+公众号双端管理系统
小程序·宠物
脱脱克克9 小时前
使用 TRAE / VS Code + DeepSeek V4 开发微信小程序、网页
微信小程序·ai编程·环境配置
2501_915921439 小时前
uni-app 上架 iOS 的完整流程(无需依赖 Mac)
android·macos·ios·小程序·uni-app·iphone·webview
前端 贾公子9 小时前
使用 wxappUnpacker 工具进行 MAC 微信小程序反编译
macos·微信小程序·小程序
CRMEB系统商城21 小时前
CRMEB多商户系统(Java)v2.3公测版发布
java·开发语言·人工智能·小程序·开源·php
嫂子的姐夫1 天前
050-wx小程序合肥住房
爬虫·python·小程序·逆向