讨论一下vue组件封装的合理性

Question

先上图 （如下）

代码如下

组件的效果

问题：

这个组件的封装形式，合理性、可扩展性、及各方面的考虑，哪种更为合适？为什么合适？两者各自的优缺点是什么？以后应该如何来封装组件？

Answer 1

一味追求"组件化"，这样会导致哪里都是组件，而组件之间耦合度又太高，最后到处分发数据。

1、 hotelList： 列表组件，三个tab都可以共用（展示方式和结构都一致的话）

2、detailHotel： 假设点击对应酒店就跳转到detailHotel页面，酒店详情，列表中每一个酒店的操作，有可能不同等级的酒店操作不一样，同类型的酒店操作一致，这时候就可以进行封装多个同等级酒店详情页面、

3.假如tab是写死的 ， 可以在同级页面展示，不用封装成组件，点击了就向服务器请求对应的数据

整体结构如下：
hotel.vue

<template>
    <div class="hotel">
        <!-- 这部分的交互可以自己添加 -->
        <div v-for="(item, index) in tabList" :key="index">
            <div @click="gethotelList()">{{ item.name }}</div>
        </div>
        <!-- 公用的 -->
        <HotelList :hotelList="hotelList"></HotelList>
    </div>
</template>
<script>
import HotelList from './HotelList'
export default {
    data() {
        return {
            hotelList: [], //酒店列表
            // 数组对象，这里可以保存 类型、选中和未选中的背景
            tabList: [{name: '五星豪华'}, {name: '浪漫爱情'}, {name: '集时精选'}]
        };
    },
    methods: {
        // tab被点击的时候，请求服务器得到对应酒店列表数据
        gethotelList(index) {
            return new Promise((resolve, reject) => {
                // hotelList
            });
        }
    },
    components:{
        HotelList
    }
};
</script>
<style lang="less" scoped></style>

hotelList.vue

<template>
    <div>
        <div v-for="(item, index) in hotelList" :key="index">
            <!-- 这里写酒店列表布局样式 -->
        </div>
    </div>
</template>
<script>
export default {
    props:['hotelList'],
    data() {
        return {
            
        }
    },
};
</script>

detailHotel.vue ：至于这个页面，假设点击每一个酒店的go就会跳转到这个页面，这时候顺便在点击的时候把每一个酒店信息传递过来，这个页面如果还有其他子列表，同样可以依次划分下去。

仅供参考

Answer 2

组件划分首先要规划出最小单位组件（最小不代表组件拆分的越细越好，而是要找到最优解，最大话降低耦合度）。

首先先分析页面元素构成，合理划分页面结构；其次考虑组件的复用性，是否可以抽离公众组件，抽离公众组件后考虑状态来源都有哪些；最后，最小化耦合，分析最小单位组件数据依赖、逻辑、组件状态可维护性等等。

以你给出的场景，像你的第二个方案其实挺合理的，将 HotelList 组件作为组件划分的最小单元。

// Home.vue
<div>
    <hotel-tabs></hotel-tabs>
    <hotel-list :hotels="hotels"></hotel-list>
</div>

以后维护卡片上的展示内容，在 HotelList 组件的模版中维护就行了，如果后期需求有变化，到时可以根据情况将 HotelList 组件继续拆分。

/*
 @ HotelList.vue
 1. 酒店卡片中展示的信息后期可能会变（增删、布局变化等等，v-if 可以解决各个元素展示的问题）
 2. 酒店列表以后可能在推荐中展示（布局可能会变、内容可能有变化）
 3. 后期可能追加其他展示内容，到时再根据情况决定是否继续拆分
**/
<div>
    <div v-for="item in hotels" :key="item.id">
      <div class="hotel-item">
        <img /* v-if="" */ class="hotel-item-picture" :src="item.src"/>
        <h4 /* v-if="" */ class="hotel-item.title">{{item.title}}</h4>
        <p /* v-if="" */>
          <span class="hotel-item-scroe">{{item.score}}</span>
          <span class="hotel-item-range">{{item.range}}</span>
        </p>
        <p /* v-if="" */>
          <span class="hotel-item-price">{{item.price}}起</span>
          <span class="hotel-item-outdated-price">{{item.outdated}}</span>
          <span 
            class="hotel-item-button icon" 
            @click="handleToDetal(params)"
          >Go
          </span>
        </p>  
      </div>
    </ul>
</div>