微信小程序组件的拆分及其传值

1、创建component组件

2、在index主页面的index.json文件里配置引入组件

3、在主页面的wxml里面直接写shoplist标签

• wx:for="{{list}}" 是循环已经在js文件里请求到的数据
• 以下是传值（传给组件）
  • characteristic="{{item.name || item.characteristic}}"
  • pic="{{item.pic}}" minPrice="{{item.minPrice}}"
  • originalPrice="{{item.originalPrice}}"

代码语言：javascript复制

<view class="mains">

	<shoplist class="shop" wx:for="{{list}}" 
	characteristic="{{item.name || item.characteristic}}" 
	pic="{{item.pic}}" minPrice="{{item.minPrice}}" 
	originalPrice="{{item.originalPrice}}" />
	
</view>

4、在组件的js里接收值并定义类型

代码语言：javascript复制

properties: {
    characteristic:{
        type:String,//类型
        value:'男童风衣'，//默认值
      },
      pic:{
        type:String,
        value:'https://cdn.it120.cc/apifactory/2019/06/25/a0edbee6-44c2-453f-9398-01edfb355323.jpg'
      },
      minPrice:{
        type:String,
        value:'700'
      },
      originalPrice:{
        type:String,
        value:'900'
      }
  },

5、在组件的wxml里直接写

代码语言：javascript复制

<image src="{{pic}}" class="image"></image>
    <view class="title" style="font-weight:800">{{characteristic}}</view>
    <view class="pirce">
	      <view style="color:red">￥{{minPrice}}</view>
	      <view style="clor:gray; text-decoration:line-through;">￥{{originalPrice}}</view>
	</view>

json component list pic 配置

0 人点赞