UNIAPP实战项目笔记5 卡片组件和组件的传递参数

梦里梦外; 2024-04-06 12:51 58阅读 0赞

#### 推荐: ####

1.  顶部滑动导航
2.  swiper
    
     *  名称: IndexSwiper
     *  封装: 是
3.  推荐商品
    
     *  名称: Recommend
     *  封装: 是
4.  卡片
    
     *  名称: card
     *  封装: 是
     *  公用: 是

### 卡片组件和组件的传递参数 ###

*  在componets文件加下新建common文件夹下新建卡片组件Card.vue

<template>
            <view class="card">
                <view class="">-</view>
                <slot>
                    <view class="card-name">{
        {
        cardTitle}}</view>
                </slot>
                <view class="">-</view>
            </view>
        </template>
    
        <script>
            export default{
        
                // 参数接收
                props:{
        
                    cardTitle:String
                }
            }
        </script>
    
        <style lang="scss">
        .card{
        
            padding: 20rpx 0;
            display: flex;
            justify-content: center;
            font-weight: bold;
        }
        .card-name{
        
            padding: 0 20rpx;
            font-size: 32rpx;
        }
        </style>

*  index.vue 引入并注册卡片组件 同时 向组件传递参数

<template>
            <view class="content">
                <view class="index">
                    <IndexSwiper></IndexSwiper>
                    <Recommend></Recommend>
                    <Card cardTitle='猜你喜欢'></Card>
                    <Card cardTitle='商品店铺'></Card>
                    <Card cardTitle='运动户外'></Card>
                </view>
                
                <view class="f-active-color">
                    文字
                </view>
                <view class="iconfont icon-xiaoxi"></view>
                <view class="text-area">
                    <text class="title">{
        {
        title}}</text>
                </view>
            </view>
        </template>
    
        <script>
            import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
            import Recommend from '@/components/index/Recommend.vue';//引入
            import Card from '@/components/common/Card.vue';//引入
            export default {
        
                data() {
        
                    return {
        
                        title: 'Hello'
                    }
                },
                components:{
        
                    IndexSwiper, //注册
                    Recommend,
                    Card
                    
                },
                onLoad() {
        
    
                },
                methods: {
        
    
                }
            }
        </script>
    
        <style>
            .content {
        
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
    
            .logo {
        
                height: 200rpx;
                width: 200rpx;
                margin-top: 200rpx;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 50rpx;
            }
    
            .text-area {
        
                display: flex;
                justify-content: center;
            }
    
            .title {
        
                font-size: 36rpx;
                color: #8f8f94;
            }
        </style>

##### 实际案例图片 #####

![给组件传递参数][4f571908cce24c4fa4fa600e7b08d73e.png]

[4f571908cce24c4fa4fa600e7b08d73e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0c315f96aca0480cad7a7865cfa63603.png