深刻理解vue组件

vue组件分类及好处

---

可以让代码更加简洁，可读性增加，代码复用性增加。

1. 个人组件 这种组件时比较好写的，怎么方便自己使用怎么来，因为协同开发时，每个人维护自己的页面，很少有交集，不需要考虑太多模块和架构设计。

2. 基础通用组件，例如轻提示、模态框、按钮等，这些组件会被大量使用，需要考虑周全，需要对组件的样式以及api上再三斟酌，以最优代码实现，别人使用时可以通过不同配置来实现不同功能。

3. 高阶组件，有时候我们在不同的业务的不同项目中，基础通用组件需要新增一些功能或者修改样式，可以对一些组件进行二次封装，以满足当前业务的需求。修改样式可以直接往项目的main.js中引入css文件，可以修改项目的整体风格，字体颜色等，或者在封装时css代码块中样式选择器加上deep来击穿scoped，scoped可以给当前组件加一个独一无二的标识，让这个组件的样式只用于当前组件，或者直接用行内样式来修改样式。

4. 业务组件，业务中被多个页面复用的组件，一般只会用在当前项目中，业务组件可能也包含高阶组件。

vue组件的三个API：props、event、slot

---

props: 写个人组件的时候，可以根据情况接收一个数组，不用判别prop的类型和规定默认值，否则其他情况最好接收一个对象，对每个prop进行类型和默认值以及必要性的定义。但是prop是单向数据流，不能在子组件里修改props的值，只能在父组件里修改以后，对应子组件里的prop也会修改，但是如果子组件通过$emit自定义事件来通知父组件，也是可以间接修改的。

slot：

1. 匿名插槽。当组件里被插入的内容单一时，可以用匿名插槽。

2. 具名插槽。当组件内部被插入的内容需要分类的时候，可以用匿名插槽，根据不同的name可以把内容插在组件内不同的位置。

3. 作用域插槽。父组件需要拿到子组件内的数据的时候，使用作用域插槽。子组件绑定属性，把想要传递的数据设为属性值，在父组件中通过slot-scope来拿到数据。

event：父组件给子组件传递自定义事件，子组件通过$emit调用事件，调用的时候，$emit可以传递参数，把子组件内部的参数传递出去。