小程序自定义组件间传值

最新推荐文章于 2024-03-05 09:54:44 发布
VIP文章 最新推荐文章于 2024-03-05 09:54:44 发布
阅读量1.1w 收藏 17
点赞数 4
分类专栏： 微信小程序 文章标签： 自定义组件 组件传值 triggerEvent
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Syleapn/article/details/97262323
版权

一、父组件向子组件传值

 即WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体请看https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

 

1、流程梳理：

父组件father

通过数据绑定的形式进行属性设置（grade）与赋要传的值（rank）。

​
    <son  grade="{
  {rank}}"></son>

​

 

子组件son

第一步:在properties中进行属性名设置。properties为组件的对外属性，是属性名到属性设置的映射表。这样我们就能映射到(找到)此处的grade~

 prop
最低0.47元/天 解锁文章
Syleapn
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
钉钉小程序 之 自定义组件的使用，以及父组件与子组件(自定义组件)传值 ...
03-29
小程序开发者工具: 1.5.7 复制代码 二、自定义组件（子组件） 子组件中： 项目的根目录下！！创建自定义组件 在对应 json 文件中定义 component 属性 如图在根目录 的 `components` 目录（目录名自定义）下存放...
小程序中自定义组件、父子传值的具体步骤（秒懂）
weixin_54187299的博客
06-22 451
最近又小伙伴问我怎么在微信小程序中怎么进行自定义组件传值，天天用没总结，今天有时间总结一下 ，小程序中的父子传值，分开步骤后其实很好理解，与vue有非常相似指出 但有几个区别要记住，不然可能什么也出不来...???????????? 1、先创建子组件的文件 ：↓ 2、在子组件的json中写（必须写，不写出不来）❗ 3、在父组件的json文件中的 usingComponents 属性中引入组件 4、在父组件的子组件标签上自定义属性 【tabs=“{{tabs}}”就是传递的数
小程序自定义组件使用及跨级传值
xiaoququ的博客
08-04 3535
1、创建子组件并引入使用 2、父页面向子组件传值 父页面中组件标签上直接写需要传递的值 <zan num="{{number}}"/> 子组件的js中 properties接收 Component({ properties: { num: Number， min: { type: Number, 类型 value: 0, ...
微信小程序开发系列（十七）·事件传参·mark-自定义数据
最新发布
时光の尘的博客
03-05 1275
通过事件对象获取到的是 触发事件的节点 以及父节点身上的所有 mark 数据微信小程序开发_时光の尘的博客-CSDN博客。
小程序自定义组件以及组件传值的简单总结
fangqi20170515的博客
12-01 2357
1、自定义组件2、使用自定义组件3、组件传值--->父传子4、组件传值--->子传父在根目录下创建components文件夹建议为每个组件都创建一个文件夹，便于区分。例：在components文件在下创建test文件夹点击test文件夹，点击鼠标右键，选中 新建Components，创建组件test，会自动生成组件对应的 4 个文件，后缀名分别为 .js ， .json ， .wxml 和 .wxss。类似于也模板，在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式。
微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值
weixin_42125732的博客
03-31 2万+
原因：因为自己想了解组件中properties里面的值如何获取到而记录这篇文章 一、自创自定义组件，在json文件夹写上“component”：true 二、父组件的操作步骤 2.1.在json文件夹加上使用组件 2.2 在js文件中写好要传的数组数据 2.3 在wxml页面进行父组件传子组件的值，用属性传值 三、字组件在自己的JS中properties接收父组件传过来的值，定义好type属性和value为[]，即为默认值（父组件传过来的值） 四、用observers监听properties的属性
微信小程序 - 自定义组件的传值
耶斯莫鱼拉的博客
08-15 399
微信小程序 - 自定义组件的传值
微信小程序之组件的四种传值方式
chenhongcancan的博客
08-01 2713
会覆盖掉原来该 key 对应的内容。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。这时因为传递的是对象类型的数据，到另一个页面获取时会发现是"[object,object]"，解决方法是利用JSON.stringify()和JSON.parse()我们同时也可以利用 app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过 getApp().globalData 获取。
微信小程序自定义组件传值 页面和组件相互传数据操作示例
10-17
主要介绍了微信小程序自定义组件传值 页面和组件相互传数据操作,结合实例形式分析了微信小程序常见传值操作相关实现技巧,需要的朋友可以参考下
微信小程序自定义组件封装及父子间组件传值的方法
01-03
首先在我们可以直接写到需要的 page 中，然后再进行抽取组件，自定义组件建议 wxzx-xxx 命名 官网地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如，我们封装的组件名为 *...
微信小程序的几种传值方式
z_星河的博客
02-06 7509
微信小程序的四种传值方式你了解多少？
微信小程序组件参数传递
12-11
本文档以简单清晰的逻辑业务帮助大家认识小程序中组件传递的使用，
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
10-17
主要介绍了微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递 ,需要的朋友可以参考下
微信小程序组件传值和组件通信
weixin_45220813的博客
03-03 329
自定义组件、微信小程序组件传值和组件通信
【小程序】自定义组件及组件间传递数据
Get your hands dirty
11-21 1394
在小程序中，类似<view>、<button>、<text>这些标签，统称为组件，丰富的组件构成了页面文件wxml。 小程序自基础库版本1.6.3起支持自定义组件，开发者可以将某个功能模块抽象成一个自定义组件，以便在不同的页面中重复使用。 自定义组件和页面一样，都有着wxml、js、json、wxss四个文件。 1.自定义组件 自定义组件 "component": true, 自定义组件要先将组件所在页面的json文件中的【component】..
微信小程序（2）——自定义组件与组件传参
unimpossibles的博客
06-01 3481
自定义组件与参数传递
微信小程序中遮罩层的实现
热门推荐
Syleapn的博客
03-13 3万+
近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习： 有好几种方法，今天先来第一种。 准备工作： 一张图片：close.png 一、方法1 先上效果： 点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。 源码： wxml代码 <vi...
微信小程序自定义组件父子组建传值
03-25
在微信小程序中，父组件向子组件传值可以使用属性传值的方式，在父组件中设置属性，在子组件中接收，如下所示： 父组件： ``` <template> <child-component prop-a="value-a"></child-component> </template> <script> import childComponent from './child-component.vue' export default { components: { 'child-component': childComponent } } </script> ``` 子组件： ``` <template> <div>{{ propA }}</div> </template> <script> export default { props: { propA: { type: String, default: '' } } } </script> ``` 这样，在父组件中设置 `prop-a` 属性的值为 `value-a` ，子组件中通过 `$props` 对象获取并显示 `propA` 值。 而子组件向父组件传值则需要使用自定义事件，在子组件中触发事件，在父组件中监听并接收，如下所示： 子组件： ``` <template> <button @click="onBtnClick">Click me</button> </template> <script> export default { methods: { onBtnClick() { this.$emit('event-name', 'value') } } } </script> ``` 父组件： ``` <template> <child-component @event-name="onEvent"></child-component> </template> <script> import childComponent from './child-component.vue' export default { components: { 'child-component': childComponent }, methods: { onEvent(value) { console.log('received value: ', value) } } } </script> ``` 这样，当子组件中的按钮被点击后，会触发 `event-name` 事件并传递一个值，在父组件中监听该事件，并接收传递的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值