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
>
证明方法是行得通的，现在将组件内的参数传送到方法里
传参通过钩子函数内传过去，因为要绑定点击事件，所以直接在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
不知道各位大神有什么见解或者建议，共同学习