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

目录

一、自定义组件的样式

二、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>
相关推荐
2501_9159090638 分钟前
深入理解HTTPS中间人抓包技术原理与实战指南
网络协议·http·ios·小程序·https·uni-app·iphone
he___H38 分钟前
微信小程序实现两行交错功能
微信小程序·小程序
前端小木屋17 小时前
uniapp与蓝牙设备连接详细步骤
前端·微信小程序
万岳科技系统开发19 小时前
私域直播系统开发从0到1:企业直播平台搭建全过程
前端·小程序·架构
2501_9160074720 小时前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview
i220818 Faiz Ul20 小时前
理财系统|基于java+vue的家庭理财系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·理财系统
河北清兮网络科技21 小时前
企业软件开发全流程:从需求到上线,如何高效落地?
小程序·app·短剧·短剧app·广告联盟
维双云1 天前
想做企业公司的教育知识付费小程序多少钱?
小程序
huang_jimei1 天前
【无标题】
微信小程序
柚鸥ASO优化1 天前
微信正在变成“搜索引擎”:小程序SEO机会全面爆发
搜索引擎·微信·小程序·小程序优化