在项目开发中，我们有必要将一些公共模块封装成组件。

例如下图：

看到这个样式，我们一定会想，下面三条数据一定是后台返回给前端一个数组，然后我们遍历出来。

• 第一种做法: 直接在页面去遍历这个数组，然后把三条数据展示出来。
• 第二种做法： 封装一个一条数据时候的组件，然后在页面遍历这个组件。

实际开发中我们采用的是第二种方式，哪有人一定会问了，第一种多简单，干嘛用第二种。

理由：

如果一个模块在多个地方展示，而你的这个模块只是写在自己的页面里面，其他地方也需要，这时候就需要重新写这个模块，费时费力。

所以我们先定一个组件，以上面为例：

文件名字： todayHou.vue

<template>
    <div class="today-body">
        <div class="today-list clearfix">
            <div class="badge-box fl">
                <span class="today-badge green" v-if="option.tradeDesc=='出售' || option.tradeDesc=='租购'">售</span>
                <span class="today-badge red"   v-if="option.tradeDesc=='租售' || option.tradeDesc=='租购' ">租</span>
                <span class="today-badge white"  v-if="option.typeDesc">私</span>
                <span class="today-badge white" v-if="option.levelDesc">{{option.levelDesc}}</span>
                <p class="today-time">{{option.followTime}}</p>
            </div>
            <div class="info-box fl">
                <p class="info-name"><span>{{option.communityName}}</span><span>·{{option.roomNum }}室</span><span>{{option.hallNum }}厅</span><span>{{option.toiletNum }}卫</span><span>{{option.area }}·㎡</span></p>
            </div>
            <div class="price-box fr">
                <p class="info-price">{{option.salePrice}}
                    <span>万</span>
                </p>
                <p class="info-rent">{{option.rentPrice}}
                    <span>元/月</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "todayHou",
    props: ['option'],   <!-- 传入的每一项的值  -->
    data() {
        return {

        };
    }
};
</script>

<style lang="less">

</style>

主页面： home.vue

<!-- 使用组件  -->
<template>
    <div class="home">
        <Card class="bg-white today">
             <today-hou  v-for="item in 组件遍历的数组 " v-bind:key="item.你设定的唯一标识"  v-bind:option="item"></today-hou>
        </Card>
    </div>
</template>

<script>

import TodayHou from "./todayHou";     <!-- 引入组件  -->

export default {
    data() {
        return {
        
        }
    },
    components: {
        TodayHou             <!-- 注册组件  -->
    },
    created() {  
        this.组件遍历的数组 = "后台接口返回值";            <!-- 组件传值  -->
    },
    methods:{

    }
};
</script>
<style lang="less">
@import url("./home.less");

.none-border{
    padding:0 !important;
}
</style>