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

这篇具有很好参考价值的文章主要介绍了小程序基础学习(组件传参)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

在组件的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>

 文章来源地址https://www.toymoban.com/news/detail-813697.html

到了这里,关于小程序基础学习(组件传参)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习笔记(14)-Vue3组件传参

    1.props(父组件传递给子组件) 1.1 实现 如果你没有使用 script setup,props 必须以 props 选项的方式声明,props 对象会作为 setup() 函数的第一个参数被传入: 在子组件中: 在父组件中: 一个组件可以有任意多的 props,默认情况下,所有 prop 都接受任意类型的值。 这种情况下,我

    2024年01月21日
    浏览(53)
  • 微信小程序 method传参 和 页面传参

    image src=\\\"/img/b1.jpg\\\" class=\\\'bannerImg\\\' mode=\\\"widthFix\\\" bindtap=\\\"gotoMessage\\\" data-flag=\\\"msg\\\"/image 使用data-参数Key = \\\'指定参数值\\\' gotoMessage(e){     let flagName =  e.target.dataset.flag     if(flagName === \\\'msg\\\'){       wx.switchTab({         url: \\\'/pages/message/message\\\',       })     }else if(fla

    2024年02月09日
    浏览(55)
  • 微信小程序文本组件text使用详解-微信小程序系统学习攻略​

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: 1 基本样式设置 基本使用还是比较简单的,下面咱们来论述一下文本样式的设置,首先是给他设置一个 class 然后在对应的 wxss 文件中编写

    2023年04月13日
    浏览(54)
  • 小程序基础学习(组件化)

            找到components文件夹下面创建新的文件夹         然后再文件夹内创建component格式的文件         创建后这样          我创建的是my-info的文件夹以及my-info的components文件,跟着普通的页面一样          找到你需要使用组件的json文件中注册组件即可

    2024年02月01日
    浏览(49)
  • 微信小程序学习笔记(四)——自定义组件

    创建组件 在根目录下创建 components 文件夹 右键点击 components 文件夹,选择 新建 Component ,就会自动生成 .wxml、.wxss、.js、.json 文件 引用组件 组件的引用方式分为“ 局部引用 ”和“ 全局引用 ”,故名思义: 局部引用 :组件只能在当前被引用的页面内使用 全局引用 :组件

    2024年02月16日
    浏览(50)
  • 原生微信小程序基础-分包加载&&自定义组件&&&项目全流程

    小程序分包加载 小程序分包加载-为什么要分包加载 微信平台对小程序单个包的代码 体积限制为 2M ,超过 2M 的情况下可以采用分包来解决 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现 按需加载 配置文件能忽略的只有静态资源, 代码无法被忽略 配置忽略文

    2024年02月08日
    浏览(54)
  • 【6 微信小程序学习 - 小程序的组件化开发,通信】

    1,在根目录创建components文件夹,自定义组件都放在此处 2,右键新建component,输入名称后悔创建四个文件 3.其中.json中的\\\"component\\\": true,表示这是一个组件 4,编写代码,和其他代码逻辑相同 1,要使用组件的父组件的json配置文件,usingComponents字段 注册 组件, 组件名称:组件路径 1 外部使用

    2024年02月13日
    浏览(53)
  • 微信小程序路由传参

    在微信小程序中,可以通过路由传参将数据传递给目标页面。以下是一种常见的方式: 在源页面中,使用 wx.navigateTo 或 wx.redirectTo 方法跳转到目标页面,并通过 URL 参数传递数据。示例: 在目标页面的 onLoad 生命周期函数中,可以通过 options 参数获取传递的参数。示例: 通过

    2024年02月07日
    浏览(40)
  • 微信小程序事件传参

    微信小程序怎么事件传参 dataset 对象 每个虚拟dom身上都拥有一个dataset对象 给虚拟 dom 绑定上 data-自定义键=“值”的这种属性,例如: 想要传一个id: 绑定上此种格式的属性后,会被去除 data- ,然后以键值对的形式添加在虚拟 dom 身上的dataset 对象身上。 事件对象 事件函数

    2024年02月09日
    浏览(59)
  • 小程序request三层封装和分包以及路由和组件传参

    工程化的概念 工程化API封装 【重点】30% 工程化组件封装 【重点】30% 小程序路由【重点】30% 上架 小程序分包【重点】10% 在开发小程序时,需要将自己的代码进行封装,命名要规范,位置要规范,以达到代码复用,可以大量生产的效果 对 wx.request() 发请求的API进行三层封装

    2024年02月14日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包