组件通信

父子组件通讯

封装子组件

card组件：子组件

新建 components 文件夹,新建组件文件夹card，新建组件card（不是新建页面）

/components/card/card.wxml

<!--components/card/card.wxml-->
<view class="card">
    <!-- 卡片组件:item 即为展示商品 -->
    <view class="item" wx:for="{{list}}" wx:key="id">
        <image src="{{item.imageUrl}}" class="image" />
        <view class="title">{{item.name}}</view>
        <view class="subtitle">{{item.packing}}</view>
        <view class="bottom">
            <view class="price">{{item.price}}</view>
            <view class="right">
                <view class="money">{{item.marketPrice}}</view>
                <image src="https://img02.hua.com/m/home/img/home_buy_btn.png" class="cart" />
            </view>
        </view>
    </view>
</view>

/components/card/card.wxss

/* components/card/card.wxss */
.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.card .item {
    width: 360rpx;
    background: white;
    margin: 10rpx 0rpx;
    border-radius: 30rpx;
}
.card .item .title{
    font-weight: 900;
    font-size: 26rpx;
}
.card .item .image {
    width: 360rpx;
    height: 360rpx;
    border-radius: 40rpx;
}
.card .item .subtitle{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 24rpx;
    margin: 10rpx 0rpx;
    height: 60rpx;
}
.card .item .bottom{
    display: flex;
    justify-content: space-around;
}
.card .item .bottom .right{
    display: flex;
    justify-content: space-between;
}
.card .item .cart {
    width: 48rpx;
    height: 48rpx;
    margin-left: 20rpx;
}
.card .item .bottom .right .money{
    color: #ccc;
    text-decoration: line-through;
}

接收参数

/components/card/card.js

// components/card/card.js
Component({

    /**
     * 组件的属性列表
     */
    //类似于 vue中的 props，接收props
    properties: {
        list:{
            type:Array
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

/components/card/card.json

{
    "component": true,
    "usingComponents": {}
}

引入组件

在页面上引用组件,并使用组件

在页面 中添加组件并注册

/pages/home/home.json

{
    "usingComponents": {
        "card":"/components/card/card"
    }
}

在页面中使用组件

传递参数

/pages/home.wxml

<!--pages/home/home.wxml-->
<view class="home">
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots indicator-color="pink" indicator-active-color="black" autoplay interval="2000" circular>
        <swiper-item wx:for="{{bannerArr}}" wx:key="id">
            <image src="{{item.imageUrl}}" mode="aspectFill" class="banner" />
        </swiper-item>
    </swiper>
    <!-- 分类 -->
    <view class="cate flex">
        <!-- 动态设置伸缩项目的样式 -->
        <view class="cate-item flex_c {{ index > 4 && 'bottom'}}" wx:for="{{categoryArr}}" wx:key="id">
            <image src="{{item.imageUrl}}" mode="" class="cate-img"/>
            <text class="cate-text">{{item.name}}</text>
        </view>
    </view>
    <!-- 首页logo -->
    <image src="https://img02.hua.com/zhuanti/valentine/2023/23_valentine_mbanner_m.png?a1" mode="widthFix" class="logo"/>
    <!-- 底部猜你喜欢和热门推荐 -->
    <view class="footer" >
        <view class="like">猜你喜欢</view>
        <!-- 引入组件 -->
        <!-- 页面给组件传递参数:属性-类似于vue的props 不写 ":" -->
        <card list="{{likeArr}}"></card>
        <button class="more">查看更多</button>
        <view class="like">热门推荐</view>
        <card list="{{hotArr}}"></card>
        <button class="more">查看更多</button>
    </view>
</view>