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

不知道各位大神有什么見解或者建議，共同學習，希望能給大家一個參考，也希望大家多多支持好吧啦網！