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

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

微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第1张图片
二、父组件的操作步骤
2.1.在json文件夹加上使用组件
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第2张图片
2.2 在js文件中写好要传的数组数据
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第3张图片
2.3 在wxml页面进行父组件传子组件的值,用属性传值
在这里插入图片描述
三、字组件在自己的JS中properties接收父组件传过来的值,定义好type属性和value为[],即为默认值(父组件传过来的值)
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第4张图片
四、用observers监听properties的属性值(重点)

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

打印的结果如下图所示,成功拿到properties的属性值(由父组件传过来的)
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第5张图片
五、子组件页面调用父组件的值
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第6张图片
六、子组件向父组件传值,需要用使用自定义事件,data-index是向handleItemTap传递参数的值 如下传递索引
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第7张图片
七、子组件在js中的methods方法中定义这个点击事件(注意components方法是在methods里面写的),触发父组件的事件是this.triggerEvent(‘事件名’,‘要传过去的值’)
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第8张图片
八、父组件wxml绑定自定义事件–bind要+上子组件写的事件名即tabsItemChange
在这里插入图片描述
九、在父组件js中调用该绑定的方法 进行你想要的操作
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值_第9张图片

你可能感兴趣的:(前端学习,小程序)