這篇文章主要為大家展示了vue如何實現公共方法抽離，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
demo：制作一個點擊按鈕增加或者減少數字
現在vue組件內部測試一下功能
<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>
效果還可以，至少方法是對的，接下來進行方法抽離和傳送參數
首先新建一個js文件 common.js
用es6的export default將方法導出
export default {
AddNum:function(){
console.log(1)
},
SubNum:function(){
console.log(2)
}
}在main.js中用import將文件導入
import Common from './common'
聲明全局common
Vue.prototype.common = Common
現在組件內只剩button和input，方法已經剪切出去
<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>點擊打印1或者2
證明方法是行得通的，現在將組件內的參數傳送到方法里
傳參通過鉤子函數內傳過去，因為要綁定點擊事件，所以直接在methods定義一個方法
<template>
<div class="all">
<p>已經抽離</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: {
//判斷點擊的是加還是減
add(booleans) {
this.number = this.common.func(this.number,booleans);
}
}
};
</script>
<style lang="scss" scoped type="text/css">
</style>這時公共方法已經簡化，這樣的話 在組件中看的比較簡潔
export default {
func(num,booleans){
if(booleans){
num++
if(num>=10){
return 10
}
}else{
num--
if(num<=0){
return 0
}
}
return num
}
}
<--------文末------------>
有一個坑
<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
}
}這個是剛開始抽離方法 直接在@click內傳參
但是點擊事件并沒有將input的內容修改
我的理解是只是將參數傳到方法里 但是方法改變參數時并未改變input綁定的this.number
以上就是關于vue如何實現公共方法抽離的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
