vue组件与插件的认识
# Vue组件+插件封装
# 一.Vue插件和组件的关系
- 项目中我们使用组件的频率往往会大于插件
- 如果不使用第三方UI组件库，很多情况下我们会编写几个常用的组件来提供给页面使用，如Message/Loading等组件，这时需要在很多页面中引入并且通过components注册组件，但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用，因此我们需要再把组件封装成插件，比如像Vant / Element这样的ui组件库，即提供了组件功能也提供了某些全局注册的插件。
- 一句话简单概括两者的关系就是：插件可以封装组件，组件可以暴露数据给插件。
## 二.Vue组件
### (1)组件组成
- 组件通常是由标记语言、逻辑和样式组成的集合
- 创建的目的就是作为可复用的模块去构建项目
- 可以理解为页面是个大盒子,包含许多个小盒子,盒子即是组件
### (2) 组件的设计思想
- 层次结构要清晰
- 扁平化、面向数据的props
- 低耦合,代码分离
- 模块化
- [设计思想链接](https://github.com/lightningminers/article/issues/36)
### (3) Vue组件的主要包含三部分：props、event、slot
- prop 表示组件接收的参数，最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，此外还可以通过type、validator等方式对输入进行验证
[props](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81)
- slot 可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot ;甚至可以使用作用域插槽
- event ($emit)是子组件向父组件传递消息的重要途径 (通过事件执行)
- 其他方式:通过ref 通信等(不通过事件行为直接获取方法)
## 三.Vue插件
### (1) 插件分类
### (2)插件实现
```js
export default {
install(Vue, options) {
Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element
// 逻辑...
}
Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
Vue.mixin({
created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
// 逻辑...
}
...
})
Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
// 逻辑...
}
}
}
```
install是注册插件主要调用的方法，包含了两个参数（Vue和自定义配置属性options），我们可以将以上代码存储到js文件中,通过Vue.use('导入的js对象')
## 三.总结
- 定义好 你需要使用者传入的数据
- 定义好 你提供给使用者的方法
- 写好组件的内部逻辑
- 组件设计原则