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

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

在组件的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>
相关推荐
J.Kuchiki36 分钟前
【PostgreSQL内核学习:哈希聚合(HashAgg)执行流程与函数调用关系分析】
学习·postgresql
Miqiuha1 小时前
设计模式之策略模式学习
学习·设计模式·策略模式
heardlover1 小时前
GundamSeed003
学习·英语学习
说私域2 小时前
开源AI大模型、AI智能名片与S2B2C商城小程序:用户需求满足的底层逻辑与实践路径
人工智能·小程序·开源
2501_916007474 小时前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
red_redemption4 小时前
自由学习记录(104)
学习
张书名4 小时前
《强化学习数学原理》学习笔记3——贝尔曼方程核心概念梳理
笔记·学习·算法
71-34 小时前
C语言速成秘籍——跳转语句(goto)
c语言·笔记·学习·其他
蓝桉_An5 小时前
CNN基础学习(自用)
神经网络·学习
Han.miracle6 小时前
数据结构——二叉树学习
数据结构·学习