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

目录

一、自定义组件的样式

二、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>
相关推荐
派小心.17 小时前
网站统计采样数据的误差核对
大数据·服务器·前端·数据库·人工智能·小程序·数据分析
河北清兮网络科技17 小时前
广告联盟 APP 介绍:搭建属于自己的流量变现平台
小程序·app·产品经理·短剧app·广告联盟
微擎应用市场21 小时前
多功能预约公众号管理系统介绍
微信小程序·小程序
JQweryuiop21 小时前
SaaS商城软件与定制开发该怎么选?推荐七彩屋商城小程序系统
小程序
青企通21 小时前
传统企业数字化转型的技术路径:从需求建模到小程序 MVP 的落地方法
小程序·php·apache
小皮虾1 天前
小程序全局状态还能这么简单?只需初始化一次,页面自动同步
前端·javascript·微信小程序
andrsted1 天前
练题簿助学教学:在线刷题、随堂考试,让一门课拥有自己的题库
学习·微信小程序·小程序·学习方法·刷题
派小心.1 天前
网站统计多域名数据隔离配置
大数据·数据库·人工智能·小程序·数据分析
2501_915921431 天前
iOS应用从开发到上架App Store的完整步骤详解
android·ios·小程序·https·uni-app·iphone·webview
省钱兄--zs2 天前
深圳24小时自助健身房软硬件解决方案实战指南与开发流程详解
java·数据仓库·spring boot·小程序·架构