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

目录

一、自定义组件的样式

二、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>
相关推荐
说私域11 小时前
链动2+1模式AI智能名片S2B2C商城小程序在微商信任重建中的创新应用与价值实现
大数据·人工智能·小程序·私域运营
qq_242188633212 小时前
微信小程序AI象棋游戏开发指南
人工智能·微信小程序·小程序
予你@。1 天前
UniApp + Vue3 实现 Tab 点击滚动定位(微信小程序)
微信小程序·小程序·uni-app
大黄说说1 天前
小程序商城哪个平台好?码云数智、有赞、微盟对比
小程序
游戏开发爱好者81 天前
完整教程:App上架苹果App Store全流程指南
android·ios·小程序·https·uni-app·iphone·webview
潆润千川科技1 天前
中老年同城社交小程序功能梳理与应用分析
小程序
说私域1 天前
数字化运营视角下用户留存体系构建与实践研究——以AI智能客服商城小程序为载体
人工智能·小程序·产品运营·流量运营·私域运营
码云数智-大飞1 天前
小程序商城哪个平台好?小程序商城制作平台深度对比
微信小程序
code袁1 天前
基于Springboot+Vue的家教小程序的设计与实现
vue.js·spring boot·小程序·vue·家教小程序
一 乐1 天前
健身房预约|基于java+ vue健身房预约小程序系统(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·健身房预约小程序