【组件封装】-【vue组件设计经验技巧】

思想

一、样式的思考：组件里写哪些样式？应该注意什么？
二、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，没有传就用默认的。如果全部写死，组件的便捷