如何构建运行良好的Vue组件

做者：Kevin Ball 译者：前端小智 来源：vuejsdevelopers

点赞再看，养成习惯

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

不多有人最初编写Vue组件时打算将其开源。咱们大多数人都是从本身编写组件开始的——咱们有一个问题，而后决定经过构建一个组件来解决它。有时咱们发现本身想要在代码库的新位置解决相同的问题，所以咱们使用组件并对其进行重构，使其可重用。而后咱们想在一个不一样的项目中使用它，因此咱们把它转移到一个独立的包中。而后咱们想“嘿，为何不把这个分享给全世界呢?”因而咱们开源了这个组件。

一方面，这意味着对于任何在Vue工做的人来讲，均可以得到大量且不断增加的开源组件，这很 piece。

另外一方面，由于这些组件中的大多数是从特定的状况而来的，而且不是全部人都有跨多重环境重用组件的设计经验，因此这些组件中的许多东西都不能很好地与Vue生态系统配合使用。

“很好”是什么意思？ 从高层次上讲，这意味着行为表现对于Vue开发人员来讲很天然，而且易于扩展和集成到任何类型的应用程序中。

在探索了普遍的开源组件以后，下面几点，我认为下面是如何制做一个良好运行的Vue组件方式：

• 实现v-model兼容性
• 事件透明化
• 为正确的元素分配属性
• 接受浏览器的键盘导航规范
• 使用事件优先于回调
• 限制组件样式

实现v-model兼容性

对于表单字段的组件使其成为惯用的最重要方法之一就是要支持v-model。 根据官方文档介绍，v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听，以下：

自定义事件也能够用于建立支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">
复制代码

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
复制代码

当用在组件上时，v-model 则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
复制代码

为了让它正常工做，这个组件内的 <input> 必须：

• 将其 value attribute 绑定到一个名叫 value 的 prop 上

• 在其 input 事件被触发时，将新的值经过自定义的 input 事件抛出

写成代码以后是这样的：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
复制代码

如今 v-model 就应该能够在这个组件上完美地工做起来了：

<custom-input v-model="searchText"></custom-input>
复制代码

事件透明化

为了实现v-model，组件须要实现input事件。但其余事件呢?好比点击事件，键盘处理等等?虽然原生事件以 HTML 的形式冒泡，可是 Vue 的事件处理在默认状况下并不冒泡。

例如，除非我作一些具体的事情，不然这是行不通的

<my-textarea-wrapper @focus="showFocus">
复制代码

除非咱们在包装组件中编写发出focus事件，不然将永远不会调用showFocus事件处理程序。不过，Vue 确实为咱们提供了一种以编程方式访问应用于组件的侦听器的方法，所以咱们能够将它们分配到正确的位置:$listener对象。

再一想，缘由很明显:这容许咱们将侦听器传递到组件中的正确位置。例如，使用文本区域包装器组件

<div class="my-textarea-wrapper">
  <textarea v-on="$listeners" ></textarea>
</div>
复制代码

如今发生在textarea上的事件就是那些被传递的事件。

怎么理解vue中$listeners属性？

假设有父组件Parent和子组件Child

// Parent
<template>
  ...
  <child v-on:event-one="methodOne" v-on:event-two="methodTwo" />
  ...
</template>
复制代码

那么你在使用Child时，传入的全部v-on事件均可以在$listeners对象中找到。

// Child
created () {
  console.log(this.$listeners) // { 'event-one': f(), 'event-two': f() }
}
复制代码

为正确的元素分配属性

如何处理textarea的rows或在任何元素上添加简单工具提示的title标记等属性呢

默认状况下，Vue采用应用于组件的属性，并将其放在该组件的根元素上。但这并不是老是咱们想要的。 若是咱们从上方再次查看textarea包装器，则在这种状况下，将属性应用于textarea自己而不是div更有意义。

为此，咱们告诉组件默认状况下不要应用属性，而是直接使用$attrs对象应用它们，在 JS 代码中：

export default {
  inheritAttrs: false,
}
复制代码

在模板中

<div class="my-textarea-wrapper">
  <textarea v-bind="$attrs"></textarea>
</div>
复制代码

官方文档讲解组件的属性传递时，讲到$attrs和inheritAttrs这两个属性，且两个属性结合会比较好用。乍一看没看懂，结合代码演示才搞清楚。

import Vue from 'vue';
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

new Vue({
  el:'#root',
  template:`
  <base-input
  v-model="username"
  required
  placeholder="Enter your username"
  input="testInput"
></base-input>
  `,
  data:{
    username:'',
  }
})
复制代码

先隐藏 inheritAttrs: false和v-bind="$attrs"，浏览器获得的结果以下

此处有两处异常：

1. 父组件中设置的placeholder等属性没有传到子组件；
2. 父组件设置的属性传递给了子组件的根元素，即label，而label是不须要的

$attrs和inheritAttrs:false即分别用来解决这两个问题首先，inheritAttrs:false解决子组件的根元素继承父元素的属性；其次，子组件中添加了v−bind="$attrs"的元素会继承父组件的属性，即便props中没有定义该属性

接受浏览器的键盘导航规范

可访问性和键盘导航是Web开发中最常被遗忘的部分之一，也是编写要在生态系统中正常运行的组件时要正确处理的最重要的事情之一。

这意味着要确保组件符合浏览器规范:tab键应该容许选择表单字段。Enter一般用于激活按钮或连接。

有关常见组件的键盘导航建议的完整列表，能够在W3C网站上找到。 遵循这些建议将使您的组件能够在全部应用程序中使用，而不只仅是那些与可访问性无关的组件。

使用事件优先于回调

当涉及到从组件到其父组件的数据通讯和用户交互时，有两个常见的选择：props中的回调函数和事件。 由于 Vue 的自定义事件不会像原生浏览器事件那样冒泡，因此二者在功能上是等效的，可是对于可重用的组件，建议能使用事件就使用事件，其次在再是回调，为何？

在Fullstack电台的一期节目中，Vue 核心团队成员Chris Fritz给出了如下理由：

1. 使用事件使父组件能够清楚地知道什么。它明确区分了“咱们从父组件那里获得的东西”和“咱们发送给组件的东西”。

2. 能够在事件处理程序中直接使用表达式，从而为简单状况提供极其紧凑的事件处理程序。

3. 它更符合习惯——Vue示例和文档倾向于使用事件来实现组件与其父组件之间的通讯。

幸运的是，若是当前使用的是props回调，则很容易修改组件以发出事件。 使用回调的组件可相似以下：

// my-custom-component.vue
export default {
  props: ['onActionHappened', ...]
  methods() {
    handleAction() {
      ... // your custom code
      if (typeof this.onActionHappened === 'function') {
        this.onActionHappened(data);
      }
    }
  }
}
复制代码

外面调用方式：

<my-custom-component :onActionHappened="actionHandler" />
复制代码

更改成基于事件的方法以下所示：

// my-custom-component.vue
export default {
  methods() {
    handleAction() {
      ... // your custom code
      this.$emit('action-happened', data);
    }
  }
}
复制代码

外面调用方式：

<my-custom-component @action-happened="actionHandler" />
复制代码

限制组件样式

Vue的单文件组件结构使咱们能够将样式直接嵌入到组件中，尤为是当与做用域结合使用时，这为咱们提供了一种很好的方式来发布彻底打包的样式化组件，而不会影响应用程序的其余部分。

因为该系统的强大功能，很容易将全部组件样式放入组件中，并交付一个彻底样式化的组件。问题是:没有任何应用程序的样式是相同的，而使组件在咱们的应用程序中看起来很完美的东西将使它在其余人的应用程序中脱颖而出。因为组件样式一般比全局样式表包含的时间晚，所以覆盖它可能成为一场专注性的噩梦。

防止这种状况,建议任何CSS不是结构所必需的组件(颜色、边框、阴影等)应该被排除在咱们的组件文件自己或可以被关闭。相反,考虑维护一个可定制的SCSS部分容许用户定制他们的心的内容。

<template>
  <div :class="isStyledClass">
    <!-- my component -->
  </div>
</template>
复制代码

在 JS 中：

export default {
  props: {
    disableStyles: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isStyledClass() {
    if (!this.disableStyles) {
      return 'is-styled';
    }
  },
}
复制代码

而后，咱们能够

@import 'my-component-styles';
.is-styled {
  @include my-component-styles();
}
复制代码

这将容许咱们随意使用现成的样式，可是想要自定义的用户再也不须要建立高度专注覆盖，他们只需经过将disableStyles属性设置为true便可关闭样式。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：vuejsdevelopers.com/2018/06/18/…

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。