vue封装可复⽤的组件?

1. 分析项⽬的所有⻚⾯结构和业务功能,抽离出相同的⻚⾯结构和业务功能

2. 在src⽬录下创建⼀个components这个的⽂件夹

3. 在这个⽂件夹内创建可复⽤的组件

4. 在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件,并进⾏注册,以标签的形式写在对应的地⽅

5. 接下来就需要对可复⽤的组件内容要进⾏封装,那么在封装的时候我们要注意组件的封闭性和开放性以及粗细粒度

6. 所谓的这个封闭性就是当我们在组件内部定义好之后外部是⽆法进⾏修改的,⽐如当前有⼀个关闭的符号,或者有⼀个箭 头,我们需要不管任何⼈使⽤该组件时候都能够显示这个箭头,⽆法从外部进⾏修改

7. 所谓的开放性就是我们需要将动态的内容以及组件通信的⽅式进⾏数据传递,保证组件的可扩展性

8. ⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装,也可以⼀个⻚⾯包含了多个组件,⾄于到底选择 哪种呢,这个是没有⼀个标准的,我们需要根据⾃⼰的业务需求去进⾏判断

9. 总结来说,所谓的如何封装可复⽤组件其实技术核⼼就是通过我们vue提供的组件通信在结合slot插槽来进⾏分装

10. ⽐如:封装⼀个搜索框组件:    1. 在components⾥⾯创建search.vue       2. 在search.vue⾥⾯实现搜索框的布局         3. 在props⾥⾯接受 title, bgColor, size , icon,以及当点击搜索按钮或者点击回⻋键的时候,触发⼀个⽅法,通过 this.$emit将输⼊框输⼊的值传递给⽗组件       4. 接下来要使⽤这个搜索组件,我们需要通过import 在⽗组件内引⼊⼦组件,并在componetns属性⾥⾯进⾏注册,    5. 在⻚⾯就可以使⽤,这个时候我们可以通过传递titile⽼控制⼦组件搜索框显示的内容,通过bgcolor可以控制搜索框 的背景颜⾊,也可以通过size设置搜索框字体的⼤⼩,也可以通过icon来设置搜索框的图标, 通过监听$emit⾥⾯定义 的⽅法来获取搜索框输⼊的值 以上就是封装的过程