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

目录

一、自定义组件的样式

二、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>
相关推荐
xkxnq7 小时前
微信小程序性能优化
微信小程序·小程序
JIngJaneIL8 小时前
专利服务系统平台|个人专利服务系统|基于java和小程序的专利服务系统设计与实现(源码+数据库+文档)
java·数据库·小程序·论文·毕设·专利服务系统平台
2501_916013748 小时前
iOS混淆工具有哪些?跨平台 App 混淆与保护的实用方案
android·ios·小程序·https·uni-app·iphone·webview
2501_915909068 小时前
iOS 文件管理实战指南,用户文件、安全访问与开发调试方案
android·ios·小程序·https·uni-app·iphone·webview
小小黑00713 小时前
总结运行CRMEB标准版(uniapp)微信小程序的问题
微信小程序·小程序·uni-app
一只程序熊14 小时前
阿里云部署若依后,浏览器能正常访问,但是apifox和小程序访问后报错链接被重置
阿里云·小程序·云计算
胡斌附体19 小时前
小程序难调的组件
前端·小程序·apache·datepicker·自定义组件·checkbox
梦吉网络20 小时前
悬赏任务系统网站兼职赚钱小程序搭建地推抖音视频任务拉新源码功能详解二开
小程序
2501_916007472 天前
Charles中文版抓包工具使用指南 提高API调试和网络优化效率
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld2 天前
剧本杀小程序系统开发:推动社交娱乐产业创新发展
小程序·娱乐