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

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

在组件的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>
相关推荐
说私域2 分钟前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的市场份额扩张路径研究
人工智能·小程序·开源
2501_9151063227 分钟前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张34 分钟前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
于顾而言2 小时前
【笔记】Comprehensive Rust语言学习
笔记·学习·rust
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
zyq99101_14 小时前
树与二叉树的奥秘全解析
c语言·数据结构·学习·1024程序员节
微露清风4 小时前
系统性学习C++-第七讲-string类
java·c++·学习
报错小能手4 小时前
项目——基于C/S架构的预约系统平台(3)
linux·开发语言·笔记·学习·架构·1024程序员节
W.Y.B.G5 小时前
css3 学习笔记
笔记·学习·css3·1024程序员节
执笔论英雄5 小时前
【大模型推理】ScheduleBatch 学习
java·spring boot·学习