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

目录

一、自定义组件的样式

二、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>
相关推荐
焦糖玛奇朵婷4 小时前
盲盒小程序一站式开发
java·大数据·服务器·前端·小程序
CHU7290355 小时前
潮玩解锁新方式!扭蛋机盲盒小程序前端功能玩法解析
小程序
程序媛徐师姐5 小时前
Java基于微信小程序的线上教育商城,附源码+文档说明
java·微信小程序·线上教育商城小程序·java线上教育商城小程序·线上教育商城微信小程序·线上教育小程序·线上教育微信小程序
2501_915106327 小时前
如何在 Mac 上面代理抓包和数据流分析
android·macos·ios·小程序·uni-app·iphone·webview
peachSoda78 小时前
小程序图片加载优化方案
前端·微信小程序·小程序
2501_915921438 小时前
在 Linux 上通过命令行上架 iOS APP,Fastlane + AppUploader(开心上架)
android·linux·运维·ios·小程序·uni-app·iphone
云云只是个程序马喽8 小时前
推客系统源码部署小程序配置机构号教程
小程序
吴声子夜歌8 小时前
小程序——开放接口(登录和用户信息)详解
小程序·apache
2501_915921438 小时前
从构建到 IPA 保护,Flutter iOS 包如何做混淆与安全处理
android·安全·flutter·ios·小程序·uni-app·iphone
努力成为包租婆8 小时前
【微信小程序-内嵌H5,微信开发工具上-页面没有更新】
微信小程序·小程序