思想
一、样式的思考：组件里写哪些样式？应该注意什么？
二、template的思考：slot还是组件里写好？
三、行为的思考：父组件定义还是子组件定义？如果在父组件中定义，那么组件的可扩展性就好了，但是会写很多代码，如果在子组件中定义，那么使用组件的人很方便但是不好扩展
四、props的思考：到底哪些东西作为props哪些东西作为组件本身的data
样式编写建议
一、容器的基本样式，内部内容的基本样式
二、尽量使用低权值，即使用标签名来定义样式（标签名的权值是最低的，为1），这样做的好处是，如果父组件想修改样式，直接给标签加class即可
三、定义一些内置类
自定义searchBar组件：
<template>
<div class="search-wrap">
<slot></slot>
<button class="search-button">搜索</button>
<button class="reset-button">重置</button>
</div>
</template>
<script>
export default{
name:"search",
props:{
msg:String
},
mounted() {
},
methods: {
search(){
}
},
}
</script>
<style scoped>
.search-wrap{
width: 600px;
display: flex;
box-shadow: 2px 3px 4px #9f9b9b;
padding: 20px;
}
.search-item{
margin-right: 15px;
}
/* 父组件传进来的内容中肯定有input标签，要给input标签低权值的样式，所以使用input标签名来添加样式，此时他的样式权值是1 */
input{
}
/* 如果用下面这种方法给input标签添加样式，那么当父组件想修改样式时，就需要用important，因为类名选择器的样式权值为10，所以下面这种写法的权值为11
.search-wrap input{
}
*/
/* 预置一些类名 */
mini-wrap{
wisth: 200px;
}
button{
border: none;
color: white;
padding: 4px 15px;
cursor: pointer;
}
.search-wrap .search-button{
background-color: rgb(23,23,185);
}
</style>
父组件使用：
<searchBar>
<div class="search-item">
<label></label>
<input class="search-input"/>
</div>
<!-- 如果想使用小一点的搜索框 -->
<div class="mini-wrap">
<label>姓名</label>
<input class="search-input"/>
</div>
</searchBar>
template建议
一、基本原则：内容固定就写死不确定的部分使用slot传入，此外还要考虑数据传递的问题，如果把数据写死，之后传出去会不会比较麻烦
二、如果平衡一点，可以这样：父组件传了slot，子组件就用slot，没有传就用默认的。如果全部写死，组件的便捷性会很高，如果用slot，组件的可扩展性会很高
<template>
<div class="search-wrap">
<slot></slot>
<!-- 上面的slot是默认插槽，下面这行代码判断所有插槽中是否有默认插槽，即父组件是否传入了默认插槽，如果不存在（没传），则使用组件的内容 -->
<div v-if="!('default) in $slots)" class="search-item">
<label>姓名</label>
<!-- 如果要把用户输入的内容（input输入框的值）传给父组件，需要使用$emit -->
<input class="search-input" v-model="name" @change="change(name)"/>
</div>
<button class="search-button">搜索</button>
<button class="reset-button">重置</button>
</div>
</template>
<script>
export default{
name:"search",
props:{
msg:String
},
mounted() {
},
methods: {
search(){
},
change(val){
this.$emit('nameChange',val)
}
},
}
</script>
<style scoped>
.search-wrap{
width: 600px;
display: flex;
box-shadow: 2px 3px 4px #9f9b9b;
padding: 20px;
}
.search-item{
margin-right: 15px;
}
button{
border: none;
color: white;
padding: 4px 15px;
cursor: pointer;
}
.search-wrap .search-button{
background-color: rgb(23,23,185);
}
</style>
行为的建议
一、把某一个行为分成基本部分和业务部分，建议每一个行为都留给父组件监听。比如弹窗组件的弹出和关闭两个行为属于基本部分，可以写死在组件内，点击确定、取消这两个行为属于业务部分，需父组件传入，但是这个四个行为建议都留给父组件监听。但是搜索组件所有的行为基本都是业务部分的，因为搜索功能在不同场景下调用的接口不一样，组件可以监听搜索按钮的点击，然后发送事件告知父组件，让父组件去调用接口
二、为了更好的扩展，可以拆分某一个行为的前后中几个周期，比如，以搜索这一行为为例，在搜索前、搜索中、搜索后这三个阶段都给父组件发送事件
props的建议
一、组件前端行为需要的数据内部定义，业务相关数据父组件传入。比如说控制弹窗组件显示隐藏状态的数据放在组件内部data，弹窗内部具体展示的内容由父组件传入
二、props也是一个组件扩展的重要接口，比如有的搜索组件有重置按钮，有的没有，那么组件可以在props中接收一个参数，用以控制是否展示重置按钮
总结
组件封装其实就是扩展性和便捷性的权衡，组件写死的部分多了，便捷性提升了，但是扩展性下降了，组件内很多内容依靠父组件传入，那么扩展性增强了，但是便捷性下降了
如何在项目中思考组件封装
一、思想：在实际项目中，我们大多封装复用的整体操作，区别于编写组件库组件，项目中往往已经有基础组件库了，我们不会再去封装基础功能组件（比如input、button、table等），所以项目中我们更多的会去观察项目中常见的整体业务操作，去封装成组件以便复用，即封装可复用的整体操作。在后台管理系统的项目中经常会遇到一些table+页码的页面，如下图所示，而elementui提供的table和页码是分开的，所以可以将二者封装成一个整体，便于使用，本节就以页码列表组件为例。
二、项目中封装业务组件的两大原则：
- 我们写的组件不要去结合具体业务逻辑：
（1）组件只作为数据的容器，数据统一父组件传入
（2）只编写ui逻辑，具体的数据操作这样的业务逻辑，触发父组件的监听交给父组件处理
- 尽量提供简便：在不结合具体业务逻辑的前提下，让父组件使用组件尽可能方便，我们的原则是观察大部分页面的设计，能方便的满足大多数页面的需求，少数页面有差距，也有扩展方案
设计组件时，针对除基本功能以外的扩展功能都要考虑不用时能关上，要用时样式如何调整？该功能如何进行？（比如说搜索功能的模糊搜索功能，是父组件给组件一个url然后组件自动查询还是将模糊搜索的功能开发出去，让父组件自己定义请求哪个地址？）该功能所涉及的数据如何归属？（是归属组件还是父组件？）
