【组件模块化8】需求分析

需求分析

拿到设计图，开始进行组件分析设计

组件设计

为了尽可能的抽象、解耦，虚线框里的业务组件是可以抽象成一个模型，panel模型。

panel

看来外层是一个大组件，一个头，一个body,然后其它的都从这里面继承，然后往里面塞东西。
按钮抽象出btn组件，轮播图和左右滑动也是一个组件,slider组件。

至于css模块和组件挂钩，其实是通过抽象组件引入进来，至于pannl长成什么样，样式写成什么样，业务组件是不需要关心的，集成css模块设计，通过panel这个桥梁传递给业务组件，这种组件设计看上去是很缜密，复用性强。

btn.vue

生成一个按钮，需要考虑外层容器，因为按钮是抽象出来的东西，不能涉及到某一个业务。比如说我们不能只考虑下载按钮长什么样，叫什么名字。
比如说这个按钮，是不是允许自定义类，是否允许定义文本，考虑类名的时候，首先要给它一个默认的类名，然后允许它传递进来一个类名。这样就实现可继承了。

btn.vue

slot是插槽的意思，vue中非常强大的功能。

panel.vue

panel.vue

slider.vue

注意：在放多少张图那里因为不确定到底放几张图，所以有两种方式，第一种用插槽slot，第二种用数组的方式。
这里不能选用slot，因为这里如果用slot，必须得有swiper-slide, 要用swiper-slide，还必须在每个业务组件内引用import { swiper, swiperSlide } from "vue-awesome-swiper", 这样组件设计起来又耦合了，我们在组件设计的时候说过不要有耦合性，所以这里不能用slot。

slider.vue 1

slider.vue 2