3 个简单的技巧让你的 vue.js 代码更优雅！
逆锋起笔
共 10693字，需浏览 22分钟
·
2021-12-01 11:27
作者：红尘炼心
https://juejin.cn/post/7005751368937897991
前言
一、善用组件让代码更有条理性
1.1、提取UI组件
this.$confirm(message, title, options)
.then(res =>{})
.catch(err =>{})
//confirm.vue
<template>
<div v-show="show">
//...
<div @click="ok"></div>
<div @click="cancel"></div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
}
},
methods: {
ok() {
this.show = false;
this.resolve();
},
cancel() {
this.show = false;
this.resolve();
},
}
}
</script>
//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"
>
</fileReader>在组件中监听文件成功打开的方法中执行
this.$emit('on-fileOpen-success',data)触发这个事件，其中data可以把文件信息传递出去，在handleFileOpenSuccess函数去处理收藏或者添加历史记录再收藏等业务交互。这种做法使文件阅读器组件具有单一性。功能组件尽量少包含UI部分，UI部分用slot插槽传入，这样使组件更纯粹，更具有复用性。
例如上传组件的上传图标，不可能随着UI设计稿的变动就往里面添加一个上传图标，此时可以利用slot插槽把上传图标传入。
//upload.vue
<template>
<div>
<slot name="icon"></slot>
</div>
</template>//index.vue
<template>
<div>
<upload>
<template #icon>
//上传图标
</template>
</upload>
</div>
</template>
二、利用v-bind使组件的属性更具有可读性
prop传入组件componentA，可以使用不带参数的v-bind。例如，对于一个给定的对象params：params: {
id: 1,
name: 'vue'
}
<componentA :id="params.id" :name="params.name"></componentA>
<componentA v-bind="params"></componentA>
三、利用attrs与attrs与attrs与listeners来封装第三方组件
1、$attrs
<template>
<div>
<el-input v-model="input"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
errorTip: {
type: String,
default: '',
}
},
data() {
return {
}
},
computed: {
input: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
errorTip为输入框输入错误的提示。<myInput v-model="input" :errorTip="errorTip"></myInput>
disabled属性来禁用输入框，要如何实现呢？一般同学会这么做<template>
<div>
<el-input v-model="input"
:disabled="disabled"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
props: {
//...
disabled: {
type: Boolean,
default: false
}
},
//...
}
</script>
$attrs一步到位，先来看一下attrs的定义。$attrs: 包含了父作用域中不作为prop被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
inheritAttrs选项设置为false，为什么呢，来看一下inheritAttrs选项的定义就明白了。默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs为false，这些默认行为将会被去掉。而通过$attrs可以让这些 attribute 生效，且可以通过v-bind显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定。
inheritAttrs设置为false，v-bind="$attrs" 才生效。<template>
<div>
<el-input v-model="input"
v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: {
type: String,
default: '',
},
errorTip: {
type: String,
default: '',
}
},
data() {
return {
}
},
computed: {
input: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
2、$listeners
this.$emit。<template>
<div>
<el-input v-model="input"
v-bind="$attrs"
@blur="blur">
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
methods: {
blur() {
this.$emit('blur')
}
}
}
</script>
<myInput
v-model="input"
:errorTip="errorTip"
@blur="handleBlur">
</myInput>
$listeners一步到位，先来看一下$listeners的定义。$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"
v-on="$listeners">
</el-input>
<div>{{errorTip}}</div>
</div>
</template>
<script>
export default {
//...
}
</script>
<myInput
v-model="input"
:errorTip="errorTip"
@blur="handleBlur">
</myInput>
v-on="$listeners"，就可以在myInput组件上使用el-input组件自定义的事件。
逆锋起笔是一个专注于程序员圈子的技术平台，你可以收获最新技术动态、最新内测资格、BAT等大厂的经验、精品学习资料、职业路线、副业思维，微信搜索逆锋起笔关注！
评论