小程序基础学习(组件传参)

原理:通知在组件标签中传递参数已达到传参的目的

在组件的js的 properties中接受传递来的参数

然后在页面是展示这些数据

源码:

<!--components/my-info/my-info.wxml-->
<view class="title">
<text class="texts">{{title}}</text>
</view>
<view class="conut">
<text class="number">{{conut}}</text>
</view>

// components/my-info/my-info.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"标题"
    },
    conut:{
      type:String,
      value:"内容没有写哦"
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

/* components/my-info/my-info.wxss */
.texts{
  color: blue;
  font-size: large;

}
.number{
  color:chartreuse;
  font-size: larger;
}

{
  "component": true,
  "usingComponents": {}
}

并在需要引入组件传参的地方使用组件即可

<my-info title="牛马程序员1" conut="我是牛马程序员"></my-info>
<my-info title="牛马程序员2" conut="我是牛马程序员2"></my-info>
<my-info title="牛马程序员3" conut="我是牛马程序员3"></my-info>
相关推荐
alfiy5 分钟前
Elasticsearch学习笔记(六)使用集群令牌将新加点加入集群
笔记·学习·elasticsearch
北极无雪20 分钟前
Spring源码学习:SpringMVC(4)DispatcherServlet请求入口分析
java·开发语言·后端·学习·spring
望森FPGA34 分钟前
HDLBits中文版,标准参考答案 |3.1.1 Basic Gates | 基本门电路
学习·fpga开发
JavaGPT43 分钟前
prometheus学习笔记之PromQL
笔记·学习·prometheus
纪伊路上盛名在1 小时前
如何初步部署自己的服务器,达到生信分析的及格线
linux·运维·服务器·python·学习·r语言·github
计算机学姐1 小时前
基于微信小程序的调查问卷管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
地球空间-技术小鱼1 小时前
嵌入式系统学习
嵌入式硬件·学习
dengqingrui1237 小时前
【树形DP】AT_dp_p Independent Set 题解
c++·学习·算法·深度优先·图论·dp
我的心永远是冰冰哒7 小时前
ad.concat()学习
学习
ZZZ_O^O7 小时前
二分查找算法——寻找旋转排序数组中的最小值&点名
数据结构·c++·学习·算法·二叉树