Vue组件

1、受控组件支持v-model指令

什么是受控组件：

如何给自定义组件添加v-model，

允许一个自定义组件在使用 v-model 时定制 prop 和 event

参考：v2.cn.vuejs.org/v2/api/#mod…

2、利用继承特性再次封装原子组件

1) props和$emit(常用)

适用场景：适合父子组件通讯方式

缺点：当层级过多时，需要一级一级传递，比较麻烦

2) 利用$attrs实现祖孙组件间的数据传递，$listeners实现祖孙组件间的事件监听
-- $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

-- $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

如el-input组件：

 

 

3、组件的每一个属性单独使用一个 props，并且使用函数或是原始类型的值。  需要指定默认值。

 

 

   

4、每个组件都要有名词，keep-alive对于未命名的组件不会缓存

官方文档：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

4、使用统一css变量，

5、动态部分支持传入DOM节点，记得留一个slot

6、风格相关

options API顺序，引入字母排序，注释，

7、性能相关: 封装出来的组件必须具有高性能，低耦合的特性

最近在使用组件时的一些感觉和建议（编写业务代码时也可以参考借鉴的方法），发出来一起讨论一下，可以的话在组内宣导一下