如何划分组件

1. 简介

使用过Vue的童鞋都知道，Vue组件化，那组件化又是什么呢？简单的说像是有一个蛋糕，我们要把它分成我们想要几个块。vue组件也是一样的，可以分成几个模块，然后组合在一起，方便以后维护代码。也方便以后我们添加或者优化某个模块，直接定位到某个模块就行。 如果想了解更多可以查看 组件基础

2. 构思

首先我们看张设计图，我们根据手机淘宝首页举例：

我们在做项目的时候，首先看到设计图的时候，不要一上去就写。我们要思考一下我们该怎么做简单又快速，让流程简单又不复杂。那我们就要分析一下你自己的项目的设计图，第一时间要想该怎么划分。

组件换分可以分为逻辑组件和页面组件

1. 逻辑组件

逻辑组件：就是可以独立的逻辑组件，组件是一个独立的功能，组件中包括所有的逻辑和交互。比如商品列表单例，单选，双选，表格...

2. 页面组件

页面组件：简单的数据渲染，父组件传值给子组件，子组件显示父组件数据以及组件的样式。

3. 划分

• 先宏观： 根据上图我们可以先分成三个大的组件，header，content，footer

• 后微观： 然后我们在细分三个组件中内容

1. **header组件：**可以分为logo组件，和input搜索组件，像这种简单的我们可以不用细分，如果分的太细，我们来回传值的会增加我们的复杂性.

<template>
 <div class="header-logo">
   <div class="logo">
     <img src="@/assets/images/logo.png">
     <input type="text" v-model="search" placeholder="寻找宝贝店铺">
   </div>
 </div>
</template>

2. **content组件：**就有点复杂了，可以更加逻辑和页面拆成多个组件。根据我们的项目和具体的需求进行划分。

• 1. 首先是一个轮播图，这个就是典型的逻辑的组件的，我们可以做成独立组件，数据以及逻辑都在这个组件中开发。 （这个就写了，网上好多的类似的组件）
• 2. 接下来就是一个类似九宫格的样式，和footer组件一样，可以看下footer组件。
• 3. 商品列表：这个就可以细分了，这个用代码就有点多了，就画个图吧，下图是基本思路：

组件传值：组件传值一般都是props，如果是项目过大或者数据过大可以用vuex。详情vuex模块化

3. footer组件： 这个就是典型的页面组件了，你也可以分成几个组件，但是不建议分组件。因为就是单纯的图标和文字显示，我们写一个list,循环渲染就行。

// Footrer.vue
<template>
 <ul class="tabBar-list">
   <li v-for="item in tabBarList" :key="item.id">
     <span>{{item.text}}</span>
     <span class="iconfont" :class="item.iconfont"></span>
   </li>
 </ul>
</template>
<script>
import { reactive } from 'vue'
export default {
 setup() {
   const state = reactive({
     tabBarList: [
       { text: '首页', iconfont: 'home', id: 1 },
       { text: '购物车', iconfont: 'cart', id: 2 },
       { text: '订单列表', iconfont: 'list', id: 3 },
       { text: '我的淘宝', iconfont: 'self', id: 4 },
       { text: '更多', iconfont: 'more', id: 5 },
     ]
   })
 }
}
</script>

4. 总结

组件划分要看项目的需求以及逻辑的实现，如果逻辑的太多，适当的拆分对我们实现逻辑更重要。如果是很多共同的样式，还是要写成页面组件，以后优化或者产品改样式的，方便统一修改。更多的还是要看我们的需求，多考虑，多构思，这样我们会事半功倍的，更好的提高我们的效率。

以上是自己的理解和思考，希望帮到你们，不足之处，还请多指教，我们共同进步。