小程序父传子组件传值

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);
},

小程序父传子组件传值相关推荐

微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
微信小程序开发之向组件传值的三种方式
一. 直接传值向组件custom-component传值的页面  <custom-component my-value="hello&q ...
微信小程序map作为子组件wx.createMapContext失效
我是将map封装成了子组件进行使用,发现wx.createMapContext无论如何都没有效果.最后,定睛一看,原来将map放到子组件中,再使用wx.createMapContext需要增加额外的参 ...
小程序navigateBack，子页面传值给父页面
子页面 let page = getCurrentPages();let prevPage = page[page.length - 2];prevPage.setData({lxr :item.po ...
vue传值给子页面html,vue.js如何父传子？
vue.js如何父传子?下面本篇文章给大家介绍一下vue.js中父传子的传值方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 引用官网的一句话:父子组件的关系可以总结为 prop ...
父子组件通信——父传子props
在父组件与子组件中,为了实现父子组件之间的通信,需要使用props,来实现父组件中的内容被子组件所使用.在子组件中使用props来进行与父组件之间的通信. 在使用组件时通过绑定props中定义 ...
小程序02/小程序自定义组件使用方法流程、自定义组件 -- 父传子流程方法
一.自定义组件使用方法 1. 创建在 components文件夹下创建文件 2. 注册在 index.json , usingComponents对象内根据路径引入组件 "usingC ...
钉钉小程序父组件调用子组件方法（钉钉小程序踩坑实录）
钉钉小程序父组件调用子组件方法页面到底部,父组件触发,调用子组件的方法,加载子组件的数据解决方法子组件里: didMount() {this.$page.childComponent = thi ...

小程序父传子组件传值

小程序父传子组件传值相关推荐

最新文章

热门文章