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

原因:因为自己想了解组件中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中调用该绑定的方法 进行你想要的操作
在这里插入图片描述

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值