前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序外部向组件传值

微信小程序外部向组件传值

作者头像
友儿
发布2022-09-13 16:13:44
5960
发布2022-09-13 16:13:44
举报
文章被收录于专栏:友儿
组件

目录结构

组件 self_item.js

代码语言:javascript
复制
...
#item 定义主页面传值并定义该属性的类型
 properties: {
      item:Object
  }
...

组件 self_item.wxml

代码语言:javascript
复制
 <view class="item">
   <image wx:if="{{item.image}}" class="image" src="{{item.image}}" mode="aspectFill"></image>
   <text class="text">{{item.name}}</text>
</view>

主页面注册组件 list.json

代码语言:javascript
复制
{
"usingComponents": {
  "list-item":"/components/list-item/list-item"
}
}

主页面数据初始化 list.js

代码语言:javascript
复制
...
 data: {
    listitem:[
          {
           id:"0",   
           image:"/assets/images/2.jpg", 
           title:"php-玩微信小程序系列",
           title1:"友儿",
           title2:"2300",
           isStart: true
          },
          {
           id:"1",   
           image:"/assets/images/2.jpg", 
           title:"java-玩微信小程序系列",
           title1:"笑话",
           title2:"800",
           isStart: false
          },
          {
           id:"2",   
           image:"/assets/images/2.jpg", 
           title:"python-玩微信小程序系列",
           title1:"晓明",
           title2:"8000",
           isStart: true
          }
      ]
}
...

主页面 list.wxml 调用

代码语言:javascript
复制
 <block wx:for="{{listitem}}" wx:key="id">
  <list-item item="{{item}}"/>
</block>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 组件
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档