【Vue】组件设计

参考原文链接：https://vuejsdevelopers.com/2018/06/18/vue-components-play-nicely

以下部分内容是直接翻译自原文，部分为原创心得。

一、“好”定义

对于一款“好的 vue 组件”的定义，我们可以从两方面来说：

从使用角度上看

1. 感觉自然（属性 & 方法都符合直觉）
2. 易于扩展（组件一般都是脱胎于某个固定场景，所以需要通过扩展来扩大使用场景）
3. 方便集成（emm ...）

从开发角度上看

1. 兼容 v-model
2. 兼容原生事件
3. 组件属性的转移
4. 支持键盘导航
5. 用事件代替回调
6. 可控的组件样式

下面我们就从开发的角度详细说说 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. 可控的组件样式

正如前面说的，组件来源于某个需求，这也在一定程度上决定了组件的基因（结构长什么样，主题什么肤色）。所以有几点我们在设计组件的时候是需要注意的：

1. 减少不必要的样式（例如 color，border，shadow 等等）
2. 漂亮的组件的样式文件，开发人员可知道如何复写（类似 Bootstrap 的自定义）
3. 通过代码层面赋予样式开关功能