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

目录

一、自定义组件的样式

二、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>
相关推荐
2301_32241428041 小时前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
CRMEB系统商城1 天前
CRMEB标准版系统(Java)v3.1正式发布
java·spring·微信小程序·php·教育电商
m0_587383001 天前
折扣卡CPS系统源码的技术架构与实战开发指南
人工智能·小程序·数据挖掘·系统架构·需求分析
2501_915106321 天前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
海岳云舟1 天前
通过Spring Authorization Server对微信小程序应用进行授权防护
微信小程序
T01156181 天前
全栈项目实战手记|艺培场馆课时预约小程序全项目开发历程完整复盘总结
运维·服务器·小程序
lhldsg1 天前
多商户团购系统源码:技术架构选型与二次开发实战指南
java·小程序·架构
2601_949950631 天前
一套小程序,解决资料整理、在线刷题和错题复盘
人工智能·小程序·刷题·练习·小程序推荐
白远山1 天前
智慧场馆解决方案小程序系统开发实战与架构设计指南
java·开发语言·小程序·架构
阿祖zu2 天前
训练师 Agent 小程序产品上线啦
微信小程序·llm·agent