快捷導(dǎo)航

vue實(shí)現(xiàn)公共方法抽離

更新時(shí)間：2020年07月31日 11:32:51 作者：孫華鵬

這篇文章主要介紹了vue實(shí)現(xiàn)公共方法抽離，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

demo：制作一個(gè)點(diǎn)擊按鈕增加或者減少數(shù)字

現(xiàn)在vue組件內(nèi)部測(cè)試一下功能

<template>
<div class="all">
<p>還未抽離</p>
<button @click="SubNum()">-</button>
<input type="number" v-model="number">
<button @click="AddNum()">+</button>
</div>
</template>

<script>
export default {
data() {
return {
number: 0
};
},
methods: {
SubNum() {
this.number--;
if (this.number <= 0) {
this.number = 0;
}
},
AddNum() {
this.number++;
if (this.number > 10) {
this.number = 10;
}
}
}
};
</script>

效果還可以，至少方法是對(duì)的，接下來(lái)進(jìn)行方法抽離和傳送參數(shù)

首先新建一個(gè)js文件 common.js

用es6的export default將方法導(dǎo)出

export default {
AddNum:function(){
console.log(1)
},
SubNum:function(){
console.log(2)
}
}

在main.js中用import將文件導(dǎo)入

import Common from './common'

聲明全局common

Vue.prototype.common = Common

現(xiàn)在組件內(nèi)只剩button和input，方法已經(jīng)剪切出去

<template>
<div class="all">
<p>即將抽離</p>
<button @click="common.SubNum()">-</button>
<input type="number" v-model="number">
<button @click="common.AddNum()">+</button>
</div>
</template>

<script>
export default {
data() {
return {
number: 0
};
},
methods: {}
};
</script>

<style lang="scss" scoped type="text/css">
</style>

點(diǎn)擊打印1或者2

證明方法是行得通的，現(xiàn)在將組件內(nèi)的參數(shù)傳送到方法里

傳參通過(guò)鉤子函數(shù)內(nèi)傳過(guò)去，因?yàn)橐壎c(diǎn)擊事件，所以直接在methods定義一個(gè)方法

<template>
<div class="all">
<p>已經(jīng)抽離</p>
<button @click="add(booleans)">-</button>
<input type="number" v-model="number">
<button @click="add(!booleans)">+</button>
</div>
</template>

<script>
export default {
data() {
return {
number: 0,
booleans: false
};
},
mounted() {},
methods: {
//判斷點(diǎn)擊的是加還是減
add(booleans) {
this.number = this.common.func(this.number,booleans);
}
}
};
</script>

<style lang="scss" scoped type="text/css">
</style>

這時(shí)公共方法已經(jīng)簡(jiǎn)化，這樣的話(huà) 在組件中看的比較簡(jiǎn)潔

export default {
func(num,booleans){
if(booleans){
num++
if(num>=10){
return 10
}
}else{
num--
if(num<=0){
return 0
}
}
return num
}
}

<--------文末------------>

有一個(gè)坑

<button @click="common.SubNum(number)">-</button>
<input type="number" v-model="number">
<button @click="common.AddNum(number)">+</button>
//

export default {
AddNum:function(num){
num++
if(num>=10){
return 10
}
console.log(num)
return num
},
SubNum:function(num){
num--
if(num<=0){
console.log(num)
return 0
}
return num
}
}

這個(gè)是剛開(kāi)始抽離方法直接在@click內(nèi)傳參

但是點(diǎn)擊事件并沒(méi)有將input的內(nèi)容修改

我的理解是只是將參數(shù)傳到方法里但是方法改變參數(shù)時(shí)并未改變input綁定的this.number

不知道各位大神有什么見(jiàn)解或者建議，共同學(xué)習(xí)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家！

您可能感興趣的文章: