程序员经验分享-hwhale

微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值

2023-11-19

原因：因为自己想了解组件中properties里面的值如何获取到而记录这篇文章
一、自创自定义组件，在json文件夹写上“component”：true

在这里插入图片描述
二、父组件的操作步骤
2.1.在json文件夹加上使用组件
在这里插入图片描述
2.2 在js文件中写好要传的数组数据
在这里插入图片描述
2.3 在wxml页面进行父组件传子组件的值，用属性传值
在这里插入图片描述
三、字组件在自己的JS中properties接收父组件传过来的值，定义好type属性和value为[]，即为默认值（父组件传过来的值）
在这里插入图片描述
四、用observers监听properties的属性值(重点)

observers:{
    'tabs': function(val){
      console.log(val)
    }
  }

打印的结果如下图所示，成功拿到properties的属性值（由父组件传过来的）
在这里插入图片描述
五、子组件页面调用父组件的值
在这里插入图片描述
六、子组件向父组件传值，需要用使用自定义事件,data-index是向handleItemTap传递参数的值 如下传递索引
在这里插入图片描述
七、子组件在js中的methods方法中定义这个点击事件（注意components方法是在methods里面写的），触发父组件的事件是this.triggerEvent(‘事件名’,‘要传过去的值’)
在这里插入图片描述
八、父组件wxml绑定自定义事件–bind要+上子组件写的事件名即tabsItemChange
在这里插入图片描述
九、在父组件js中调用该绑定的方法 进行你想要的操作
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端学习

小程序

微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值 的相关文章

  • 多柱汉诺塔(Matrix上选做题)——递归与动态规划

    分析 对于三柱汉诺塔问题 我们已经熟知步骤数最优解为 2 i 1 2 i 1 2i 1 其中 i 为盘子个数 对于四柱以上的问题 我们将柱子分为三类 起点柱Start 辅助柱Buf

  • 侯捷系列：c++面向对象高级编程（上）

    文章目录 基于对象的程序设计 不带有指针成员变量的类 以复数类 Complex 为例 头文件的结构 访问级别 函数设计 内联函数 构造函数 常量成员函数 参数的值传递和引用传递 返回值的值传递和引用传递 友元 操作符重载 在类内声明 pub

随机推荐

  • sqli-labs (less-33)

    sqli labs less 33 进入33关 输入id 1 这里我们直接通过查看源代码查看这关是否也使用了GBK编码 可知确实使用了GBK编码 所以我们在单引号前面输入 df即可让单引号成功逃逸 http 127 0 0 1 sql1 L

  • nodejs后端相关知识总结

    1 koa koa执行逻辑代码 app use async ctx next gt await next ctx response type text html ctx response body h1 Hello koa2 h1 每收到一

  • 『Python基础-15』递归函数 Recursion Function

    什么是递归函数 一种计算过程 如果其中每一步都要用到前一步或前几步的结果 称为递归的 用递归过程定义的函数 称为递归函数 例如连加 连乘及阶乘等 凡是递归的函数 都是可计算的 即能行的 递归就是一个函数在它的函数体内调用它自身 编程语言中的

  • 基于Matlab实现图像拼接技术（附上完整源码+图像）

    图像拼接是数字图像处理中一个重要的问题 它的目标是将多张图像拼接成一张更大的图像 图像拼接技术在许多领域中都有广泛的应用 如全景图像拼接 医学图像拼接 遥感图像拼接等 本文将介绍一种基于Matlab实现的图像拼接技术 即基于特征匹配的图像拼

  • java快速获取mac地址的方法

    在开发中需要获取电脑的mac地址 记录一下java快速获取mac地址的方法 也可获取到ip地址 public static void main String args throws UnknownHostException SocketEx

  • Class类文件结构

    Class文件是一组以8位字节为基础单位的二进制流 各个数据项目严格按照顺序紧凑地排列在Class文件中 中间没有添加任何分隔符 这使得整个Class文件中存储的内容几乎全部都是程序运行的必要数据 没有空隙存在 根据Java虚拟机规范的规定

  • 解决QT连续发送数据的问题

    在QT的学习网络的学习中 最大的问题是服务器与客户端收发数据的问题 当一方连续发送几次数据给另一方时 容易出现好几种错误 1 收到的数据不全 只有第一个 2 收不到 3 收到的数据不对 readyRead在信号到达时 开始接收 我即使调用几

  • 微信小程序自动检测版本并提示更新新版本

    微信小程序自动检测版本并提示更新新版本 微信小程序开发过程中 我们在版本更新迭代后 微信小程序客户端并不能触发自动更新 需要用户手动清理小程序后重新搜索进入后才能获取到最新的小程序版本 但是这个是用户所不能感知到的操作 也很麻烦 故需要提醒

  • Unity学习之路10——多人游戏与网络

    Unity学习之路10 多人游戏与网络 作业要求 选择一个以前的作业或自己选择一个小游戏 设计成网络游戏 效果图 实现过程 在上一次作业的基础上 将AI小坦克改成双人对战坦克游戏 主要参考资料 老师的博客 Step1 为了简化 去掉了上次作

  • js基础之构造函数和类

    JS的构造函数和ES6的类是JS中很重要的概念 也是面向对象编程的核心 在本文中 我们将探讨JS的构造函数和ES6的类的基础知识 包括它们的定义 使用方法以及它们之间的区别 JS的构造函数 JS中的构造函数是一种特殊的函数 用于创建对象 它

  • 没有安稳的工作（几年前帖子，私密变公开后时间就变了）

    上个月请假 发现公司在网上立即招人了 上周请假 发现公司又在网上招人了 试用期还没有过 如果按照这个情况 真是哪里都不安稳 双向选择吧 不过这个公司确实人才济济 能学到很多东西 虽然给我的工资是应届优秀硕士生的工资

  • 送一个2022年最赚钱的方法！包含操作方法！

    在互联网上 可恶的人有很多 值得我们学习的人也有很多 有的人做起事来不讲武德 而有的人却是我们值得学习一生的榜样 在赚钱的路上 信息就是金钱 你掌握了信息的源头 就掌握的金矿 拥有足够的信息来源 那么你就有足够的金钱 假如你想在一个行业里快

  • shell的排序

    目录 一 冒泡排序 1 定义 2 基本思想 3 算法思路 4 算法逻辑图 5 示例1 将指定数组重新排序 6 示例2 写一个函数 输入任何数组都可以进行排序 二 直接选择排序 1 直接选择排序的逻辑图 2 示例 将指定数组重新排序 三 反转

  • 使用Aspose在Java中将Excel文件转换为HTML

    Excel电子表格可让您以表格形式存储和组织数据 也可以执行计算以及生成不同类型的图形和图表以分析数据 但是 在各种情况下 可能需要执行Excel到HTML的转换才能将工作表转换为HTML页面 例如 将电子表格的内容嵌入到网页中时 因此 本

  • 出现Unknown initial character set index ‘255‘ received from server问题时如何解决

    Unknown initial character set index 255 received from server Initial client character set can be forced via the characte

  • 逻辑回归（Logistic Regression, LR）简介

    逻辑回归 Logistic Regression LR 简介 标签 空格分隔 机器学习 机器学习最通俗的解释就是让机器学会决策 对于我们人来说 比如去菜市场里挑选芒果 从一堆芒果中拿出一个 根据果皮颜色 大小 软硬等属性或叫做特征 我们就会

  • Shell脚本运行方式

    Shell脚本通常以 shebang 起始 后跟Shell解释器路径 bin bash 两种运行脚本文件的方式 bash 文件名 文件位于当前目录下 此种方式不用shebang 文件名 或 完整路径 代表当前目录 脚本必须有可执行权限 并且

  • selenium如何关闭浏览器中新打开的标签页

    最近在用selenium做自动化时遇到了一个问题 那就是当我在当前页面点击了一个链接之后 弹出一个新的页签来展示内容 而不是在当前页面展示 而我要做的就是关闭这个新打开的页签 因为我后续的操作是基于有链接的那个页面的 经过多次思考和选择 终

  • flex布局中flex-shrink的使用

    div style width 100 display flex border 1px solid black div style width 500px height 100px background color red 1 div di

  • 微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值

    原因 因为自己想了解组件中properties里面的值如何获取到而记录这篇文章 一 自创自定义组件 在json文件夹写上 component true 二 父组件的操作步骤 2 1 在json文件夹加上使用组件 2 2 在js文件中写好要传

热门标签