组件复用

time: 2019.9.10
author: heyunjiang

背景

最近写了很多 vue 的代码，基本上对 vue 涉及到的常用知识点都用到了，这里对 vue 代码复用方式做个总结。

项目通用组件：比如时间轴、编辑器、左右模块拖拽、全局自定义 select、全局自定义 input 等
业务通用组件：比如 element 日期扩展、input 各种类型输入等，这个由项目决定
插件：使用外部插件、项目内定义的插件，插件内通常注册一些全局使用的组件、指令、prototype 方法等
指令：自定义的指令，比如 v-focus、v-blur 等，实现一些简单的操作 dom，将一些常用的操作抽离出来
mixin：混入，包括业务模块通用 mixin 和一些通用组件 mixin，比如通用过滤器的 mixin。mixin 可以包含任意 vue 组件选项，当和使用 mixin 的组件同名时，会把 mixin 的插入到组件之前，同名属性会被组件覆盖，以组件的生效，生命周期也是组件的执行在后面。也可以定义全局 mixin
全局样式：抽离全局样式
vuex：vuex除了统一状态管理外，还可以用于保存全局使用的一些属性、方法
渲染函数、jsx、inline-template、X-Template：一些通用组件，可以采用 jsx 和渲染函数来编写，现在还没有遇到用 template 解决不来的问题
过滤器：关键字 filter ，用于对 template 中的文本进行格式化处理，比如全部大写、全部小写等
slot：不同于抽离组件，也不同于 props 等，插槽是插入一个子组件到父组件中，包含来一个完整的组件，不用在父组件中写 if 判断逻辑