小程序父传子组件传值

index.wxml是父组件 banner.wxml是子组件。现在将banner图从index.wxml传入到banner.wxml。

一、父组件

index.wxml

1、父组件在引用组件中定义属性 bannerList是子组件在property中定义一致的属性名称。{{bannerLists}}是在index.js data中定义的名称 这两个需要名称的一一对应。

<view class="container">
  <bannerPic bannerList="{{bannerLists}}"></bannerPic>
</view>

注释：bannerLists对应js中data里的bannerLists 

index.js

 data: {
    //首页banner轮播图
    bannerLists: []
}

二、子组件

banner.wxml

<view>
      <image class='showImg' src='{{bannerList[0].resourcePath}}' style='height:910rpx'></image>
</view>

banner.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    bannerList:{
      type:Array
    }
  }
)}

三、引用值

在wxml中是可以{{bannerList}}这样子应用，在js中是可以 this.properties.bannerList中引用。

ready:function(){
    console.log(this.properties.bannerList);
},