参考原文链接：https://vuejsdevelopers.com/2018/06/18/vue-components-play-nicely
以下部分内容是直接翻译自原文，部分为原创心得。
一、“好”定义
对于一款“好的 vue 组件”的定义，我们可以从两方面来说：
从使用角度上看
- 感觉自然（属性 & 方法都符合直觉）
- 易于扩展（组件一般都是脱胎于某个固定场景，所以需要通过扩展来扩大使用场景）
- 方便集成（emm ...）
从开发角度上看
- 兼容
v-model - 兼容原生事件
- 组件属性的转移
- 支持键盘导航
- 用事件代替回调
- 可控的组件样式
下面我们就从开发的角度详细说说 vue 组件的设计
二、解释
1. 兼容 v-model
在如今，【双向绑定】是主流前端框架（vue、react、ng 等）的必备特性，而组件中的很大一块，就是表单组件。所以若能支持 v-model 的特性，会使组件使用起来拥有和原生组件近似的感觉，这个也就是上面提到的【感觉自然】。
通过 vue 的文档，我们发现 v-model 其实就是一种【语法糖】，其本质是传递一个 value 属性，并提供一个 input 事件处理器。
2. 兼容原生事件
原生的事件会基于 HTML 元素进行冒泡，而 Vue 的事件处理默认不会产生冒泡行为。这时候我们需要通过 $listeners 来访问组件的事件监听者。看下面的两段代码：
<!-- 父文件 -->
<customer-input-wrapper @focus="handleFocus">
下面是组件的结构，正常情况下触发 input 的 focus 事件是不会调用 handleFocus 方法的（除非显示 emit 事件），所以我们需要在 input 上监听 $listeners，写法如下：
<!-- 组件 -->
<div>
<input v-on='$listeners' />
</div>
知识延伸：$listeners
3. 组件属性的转移
一般来说，添加在组件上的属性，会自动赋给组件的根元素，例如：
<customer-input-wrapper name="main">
会解析成：
<div name="main">
<input v-on='$listeners' />
</div>
有些时候我们觉得这种默认行为没问题，但也有时候却不能令人满意，比如我想把 main 样式类赋给 input 元素。这时候需要配合 inheritAttrs 和 $attrs 两个特性。用法如下：
// 在组件定义里
export default {
inheritAttrs: false,
// ...
}
<!-- 在组件模板里 -->
<div class="main">
<input v-on='$listeners' v-bind="$attrs" />
</div>
知识延伸：inheritAttrs | $attrs
4. 支持键盘导航
这条是关于可访问性（Accessibility）的，但在这里并不想多讨论，因为目前国内对特殊用户的【可访问性】关注度并不高，我也欠缺相关经验。我印象中，在这方面 Bootstrap 写的还是蛮到位的，值得学习。
如有兴趣可查看 W3C
5. 用事件代替回调
这个其实也是为了让组件用起来更【自然】，毕竟我们和原生组件交互都是用 @click 类似写法交互的。用回调进行交互，一般有 vue 时间开发经验的人员都了解，这里只说说如何将事件注入组件，就是用 $emit 方法，还是用一个例子说明下：
<!-- 父文件 -->
<customer-input-wrapper @waitToCall="handleDoSomething">
// 在组件定义里
export default {
methods: {
handleAction() {
this.$emit('waitToCall', data)
}
}
}
知识延伸：$emit
6. 可控的组件样式
正如前面说的，组件来源于某个需求，这也在一定程度上决定了组件的基因（结构长什么样，主题什么肤色）。所以有几点我们在设计组件的时候是需要注意的：
- 减少不必要的样式（例如 color，border，shadow 等等）
- 漂亮的组件的样式文件，开发人员可知道如何复写（类似 Bootstrap 的自定义）
- 通过代码层面赋予样式开关功能
