微信小程序之父子组件数据传递

微信小程序之父子组件数据传递

自定义组件

1. 创建组件目录

微信小程序之父子组件数据传递_第1张图片


2. 测试组件使用

注意:组件称为子组件,引用页面为父组件

  • 测试第一步
    微信小程序之父子组件数据传递_第2张图片
  • 测试第二步
    微信小程序之父子组件数据传递_第3张图片
  • 测试第三步
    微信小程序之父子组件数据传递_第4张图片
    父组件成功显示子组件内容

3. 测试父组件向子组件传递数据

  • step1:
    父组件写上一个属性abc父组件写上一个属性
  • step2:
    子组件属性列表中写入该属性对象信息微信小程序之父子组件数据传递_第5张图片
  • step3:
    子组件中显示由父组件传递过来的属性数据微信小程序之父子组件数据传递_第6张图片

4. 测试子组件向父组件传递数据

子组件使用this.triggerEvent方法向父组件传递数据

点击组件间通信与事件了解详情。。。

  • step1:
    微信小程序之父子组件数据传递_第7张图片
  • step2:
    微信小程序之父子组件数据传递_第8张图片
  • step3:
    微信小程序之父子组件数据传递_第9张图片
  • step4:
    微信小程序之父子组件数据传递_第10张图片

你可能感兴趣的:(自定义组件)