vuejs组件设计

Question

布局1

布局2

有两个除了布局不一样其他完全一样的部分（类似图片所示），请问这里我是应该写成一个组件，把className做成参数传入props属性里面，还是写成两个组件，复用template和script里面的代码，修改对应的css呢？不知道我的思路对不对，求更好的解决方案？谢谢

Answer 1

判断是否应该写成一个组件还是两个组件要看几个方面：

1 看内容，如果内容相同，那么最好是写成一个组件，再通过状态控制不同的展现方式
2 复杂度，如果要让一个组件兼顾多种展现情况，而过度重构，那就得不偿失了，复杂度是构建组件的一个指标
3 重用度，如果一个组件仅仅使用一次，那么是否抽组件就不是first level thing，如果重用度非常的高，那么就需要优先考虑这个问题了

Answer 2

我的做法：在template里做文章

1.判断父节点的width
2.根据不同的width执行不同的css，有点类似Bootstrap grid布局

.container 最大宽度
None 750px 970px 1170px
类前缀
.col-xs- .col-sm- .col-md- .col-lg-

希望能帮助你

Answer 3

应该是一个组件。