vue实现公共方法抽离

vue实现公共方法抽离

867
2020-09-08 11:04:47

这篇文章主要介绍了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>

vue实现公共方法抽离 (https://www.wpmee.com/) javascript教程 第1张

效果还可以,至少方法是对的,接下来进行方法抽离和传送参数

首先新建一个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>

vue实现公共方法抽离 (https://www.wpmee.com/) javascript教程 第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

}

}

vue实现公共方法抽离 (https://www.wpmee.com/) javascript教程 第3张

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

有一个坑

<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实现公共方法抽离 (https://www.wpmee.com/) javascript教程 第4张

喜欢这个文章就点个赞分享给好友吧~

END
相关标签

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持
成为会员