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

目录

一、自定义组件的样式

二、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>
相关推荐
万岳科技系统开发6 小时前
付费知识系统源码的整体架构设计与模块划分
java·数据库·小程序
2501_915921436 小时前
iOS App 中 SSL Pinning 场景下代理抓包失效的原因
android·网络协议·ios·小程序·uni-app·iphone·ssl
一品威客爱开发6 小时前
情绪识别技术优化客服 App 体验:让服务更贴心高效!
小程序
Brduino脑机接口技术答疑10 小时前
SSVEP 脑电小程序说明
人工智能·机器学习·小程序·脑机接口
hello kitty w10 小时前
1.标签定义
小程序
说私域10 小时前
点状打法在电商与社群空间中的创新实践:基于开源链动2+1模式AI智能名片S2B2C商城小程序的探索
人工智能·小程序·开源
OctShop大型商城源码10 小时前
免费开源大型多用户多商家小程序电商系统源码_OctShop
微信小程序·小程序·开源·小程序电商系统·多用户商城系统
2501_9160088910 小时前
在 Windows 上使用开心上架(Appuploader)在 Windows 环境下创建与管理 iOS 证书
android·ios·小程序·https·uni-app·iphone·webview
小白变怪兽11 小时前
微信小程序页面中监听globalData数据变化
微信小程序·小程序
计算机毕设指导611 小时前
基于微信小程序的烧烤店点餐和结账系统【源码文末联系】
java·spring·微信小程序·小程序·tomcat·maven·intellij-idea