关于Vue代码可读性的几点建议

this.resolve();

},

cancel() {

this.show = false;

this.resolve();

},

}

}

//index.js

import Vue from ‘vue’;

import options from ‘./confirm.vue’;

const Confirm = Vue.extend(options);

let confirm = undefined;

const ConfirmInit = (options = {}) => {

return new Promise((resolve, reject) => {

options.resolve = resolve;

options.reject = reject;

confirm = new Confirm({

el: document.createElement(‘div’),

data: options

})

document.body.appendChild(confirm.$el);

Vue.nextTick(() => {

if (confirm) confirm.show = true;

})

return confirm;

})

}

Vue.prototype.$confirm = ConfirmInit;

//main.js

import ‘components/confirm/index.js’;//全局注册二次确认弹窗confirm组件

1.2、按模块提取业务组件

一个页面可以分为多个区域，比如头部、底部、侧边栏、商品列表、成员列表等等，每个区域可以当作一个模块来提取业务组件。

1.3、按功能提取功能组件

按模块提取完业务组件，此时业务组件有可能还是很庞大的，故要按功能在进一步地提取功能组件。

功能有大有小，提取要注意把握几个原则：

• 过于简单的功能不提取

例如一个收藏的功能，只要请求一个接口就完成，类似这样的功能不要提取。要有一定复杂度的逻辑操作的功能才提取。

• 功能要单一，一个功能组件只处理一项业务。

例如一个文件阅读器组件，有一个需求，要求打开文件后自动收藏该文件，那么收藏逻辑代码要写在哪里呢？

或许你想都没想就在组件中监听文件成功打开的方法中写下收藏逻辑代码，过一段时间后，需求改为要先添加到阅读记录中再点击收藏按钮收藏，去组件中修改代码时发现另一个页面也引用了这个组件，故在组件中要额外加个参数做业务场景区分，随着需求的变化导致业务场景的叠加，组件的代码中会添加各种判断逻辑，久而久之变得又长又臭，显然这种做法是不可去。

正确的做法是在组件标签上自定义一个事件on-fileOpen-success，用handleFileOpenSuccess函数来监听这个事件。

<fileReader

@on-fileOpen-success=“handleFileOpenSuccess”

在组件中监听文件成功打开的方法中执行this.$emit('on-fileOpen-success',data)触发这个事件，其中data可以把文件信息传递出去，在handleFileOpenSuccess函数去处理收藏或者添加历史记录再收藏等业务交互。这种做法使文件阅读器组件具有单一性。

• 功能组件尽量少包含UI部分，UI部分用slot插槽传入，这样使组件更纯粹，更具有复用性。

例如上传组件的上传图标，不可能随着UI设计稿的变动就往里面添加一个上传图标，此时可以利用slot插槽把上传图标传入。

//upload.vue

//index.vue

<template #icon>

//上传图标

二、利用v-bind使组件的属性更具有可读性

---

如果想要将一个对象的所有属性都作为prop传入组件componentA，可以使用不带参数的v-bind。例如，对于一个给定的对象params：

params: {

id: 1,

name: ‘vue’

}

优化前

优化后

三、利用attrs与attrs与attrs与listeners来封装第三方组件

---

1、$attrs

在封装第三方组件中，经常会遇到一个问题，如何通过封装的组件去使用第三方组件自身的属性和事件。

比如封装一个elementUi组件中的Input输入框组件myInput，当输入错误的内容在输入框下面显示错误的提示。

myInput组件代码如下所示：

{{errorTip}}

这样调用myInput组件，其中errorTip为输入框输入错误的提示。

如果要在myInput组件上添加一个disabled属性来禁用输入框，要如何实现呢？一般同学会这么做

<el-input v-model=“input”

:disabled=“disabled”>

{{errorTip}}

过一段时间后又要在myInput组件上添加el-input组件其它的属性，el-input组件总共有27个多，那该怎么呢，难道一个个用prop传进去，这样做不仅可读性差而且繁琐，可以用$attrs一步到位，先来看一下attrs的定义。

$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件

<el-input v-model=“input”

v-bind=“$attrs”>

{{errorTip}}

这还不够，还得把inheritAttrs选项设置为false，为什么呢，来看一下inheritAttrs选项的定义就明白了。

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。而通过 $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定。

简单来说，把inheritAttrs设置为false，v-bind="$attrs" 才生效。

<el-input v-model=“input”

v-bind=“$attrs”>

{{errorTip}}