zl程序教程

您现在的位置是:首页 >  工具

当前栏目

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

组件微信程序 外部 传值
2023-06-13 09:12:28 时间

组件

目录结构

组件 self_item.js

...
#item 定义主页面传值并定义该属性的类型
 properties: {
      item:Object
  }
...

组件 self_item.wxml

 <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

{
"usingComponents": {
  "list-item":"/components/list-item/list-item"
}
}

主页面数据初始化 list.js

...
 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 调用

 <block wx:for="{{listitem}}" wx:key="id">
  <list-item item="{{item}}"/>
</block>