3 個(gè)簡(jiǎn)單的技巧讓你的 vue.js 代碼更優(yōu)雅！
作者：紅塵煉心
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';//全局注冊(cè)二次確認(rèn)彈窗confirm組件
1.2、按模塊提取業(yè)務(wù)組件
1.3、按功能提取功能組件
過(guò)于簡(jiǎn)單的功能不提取
例如一個(gè)收藏的功能，只要請(qǐng)求一個(gè)接口就完成，類似這樣的功能不要提取。要有一定復(fù)雜度的邏輯操作的功能才提取。
功能要單一，一個(gè)功能組件只處理一項(xiàng)業(yè)務(wù)。
例如一個(gè)文件閱讀器組件，有一個(gè)需求，要求打開(kāi)文件后自動(dòng)收藏該文件，那么收藏邏輯代碼要寫在哪里呢？
或許你想都沒(méi)想就在組件中監(jiān)聽(tīng)文件成功打開(kāi)的方法中寫下收藏邏輯代碼，過(guò)一段時(shí)間后，需求改為要先添加到閱讀記錄中再點(diǎn)擊收藏按鈕收藏，去組件中修改代碼時(shí)發(fā)現(xiàn)另一個(gè)頁(yè)面也引用了這個(gè)組件，故在組件中要額外加個(gè)參數(shù)做業(yè)務(wù)場(chǎng)景區(qū)分，隨著需求的變化導(dǎo)致業(yè)務(wù)場(chǎng)景的疊加，組件的代碼中會(huì)添加各種判斷邏輯，久而久之變得又長(zhǎng)又臭，顯然這種做法是不可去。
正確的做法是在組件標(biāo)簽上自定義一個(gè)事件
on-fileOpen-success，用handleFileOpenSuccess函數(shù)來(lái)監(jiān)聽(tīng)這個(gè)事件。<fileReader
@on-fileOpen-success="handleFileOpenSuccess"
>
</fileReader>在組件中監(jiān)聽(tīng)文件成功打開(kāi)的方法中執(zhí)行
this.$emit('on-fileOpen-success',data)觸發(fā)這個(gè)事件，其中data可以把文件信息傳遞出去，在handleFileOpenSuccess函數(shù)去處理收藏或者添加歷史記錄再收藏等業(yè)務(wù)交互。這種做法使文件閱讀器組件具有單一性。功能組件盡量少包含UI部分，UI部分用slot插槽傳入，這樣使組件更純粹，更具有復(fù)用性。
例如上傳組件的上傳圖標(biāo)，不可能隨著UI設(shè)計(jì)稿的變動(dòng)就往里面添加一個(gè)上傳圖標(biāo)，此時(shí)可以利用slot插槽把上傳圖標(biāo)傳入。
//upload.vue
<template>
<div>
<slot name="icon"></slot>
</div>
</template>//index.vue
<template>
<div>
<upload>
<template #icon>
//上傳圖標(biāo)
</template>
</upload>
</div>
</template>
二、利用v-bind使組件的屬性更具有可讀性
prop傳入組件componentA，可以使用不帶參數(shù)的v-bind。例如，對(duì)于一個(gè)給定的對(duì)象params：params: {
id: 1,
name: 'vue'
}
<componentA :id="params.id" :name="params.name"></componentA>
<componentA v-bind="params"></componentA>
三、利用attrs與attrs與attrs與listeners來(lái)封裝第三方組件
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為輸入框輸入錯(cuò)誤的提示。<myInput v-model="input" :errorTip="errorTip"></myInput>
disabled屬性來(lái)禁用輸入框，要如何實(shí)現(xiàn)呢？一般同學(xué)會(huì)這么做<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一步到位，先來(lái)看一下attrs的定義。$attrs: 包含了父作用域中不作為prop被識(shí)別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何prop時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò)v-bind="$attrs"傳入內(nèi)部組件
<template>
<div>
<el-input v-model="input"
v-bind="$attrs"></el-input>
<div>{{errorTip}}</div>
</div>
</template>
inheritAttrs選項(xiàng)設(shè)置為false，為什么呢，來(lái)看一下inheritAttrs選項(xiàng)的定義就明白了。默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為。通過(guò)設(shè)置 inheritAttrs為false，這些默認(rèn)行為將會(huì)被去掉。而通過(guò)$attrs可以讓這些 attribute 生效，且可以通過(guò)v-bind顯性的綁定到非根元素上。注意：這個(gè)選項(xiàng)不影響 class 和 style 綁定。
inheritAttrs設(shè)置為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一步到位，先來(lái)看一下$listeners的定義。$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件。
<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組件自定義的事件。
逆鋒起筆是一個(gè)專注于程序員圈子的技術(shù)平臺(tái)，你可以收獲最新技術(shù)動(dòng)態(tài)、最新內(nèi)測(cè)資格、BAT等大廠的經(jīng)驗(yàn)、精品學(xué)習(xí)資料、職業(yè)路線、副業(yè)思維，微信搜索逆鋒起筆關(guān)注！
Vue 實(shí)現(xiàn)數(shù)組四級(jí)聯(lián)動(dòng)
評(píng)論
圖片
表情