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

目录

一、自定义组件的样式

二、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_915909068 小时前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
toooooop810 小时前
微信小程序轮播图高度自适应优化
微信小程序·小程序
StarChainTech10 小时前
电动车租赁行业的核心需求:智能中控设备的选择与技术方案
物联网·微信小程序·小程序·软件需求·共享经济
计算机毕设指导612 小时前
基于微信小程序的积分制零食自选平台【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
云起SAAS12 小时前
老年美文文章图文短视频资讯阅读抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·老年美文文章图文短视频资讯阅读
qq_124987075312 小时前
基于微信小程序的民宿预订系统的设计与实现(源码+论文+部署+安装)
java·spring boot·后端·微信小程序·毕业设计
2501_9151063212 小时前
App HTTPS 抓包实战解析,从代理调试到真实网络流量观察的完整抓包思路
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者814 小时前
苹果App Store应用程序上架方式全面指南
android·小程序·https·uni-app·iphone·webview
2501_9160088914 小时前
深入理解 iPhone 文件管理,从沙盒结构到开发调试的多工具协同实践
android·ios·小程序·https·uni-app·iphone·webview
说私域14 小时前
人口红利消退与疫情冲击下电商行业的转型路径探索——以开源链动2+1模式S2B2C商城小程序为例
小程序·开源