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

不知道各位大神有什么见解或者建议，共同学习，希望能给大家一个参考，也希望大家多多支持好吧啦网！