vue实现公共方法抽离


Posted in Javascript onJuly 31, 2020

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实现公共方法抽离

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

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

vue实现公共方法抽离

证明方法是行得通的,现在将组件内的参数传送到方法里

传参通过钩子函数内传过去,因为要绑定点击事件,所以直接在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实现公共方法抽离

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

有一个坑

<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

不知道各位大神有什么见解或者建议,共同学习,希望能给大家一个参考,也希望大家多多支持三水点靠木!

Javascript 相关文章推荐
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
Vue之封装公用变量以及实现方式
Jul 31 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php检查页面是否被百度收录
2015/10/28 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
JSONP跨域请求
2017/03/02 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python基于http下载视频或音频
2018/06/20 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
高中生期末评语大全
2014/01/28 职场文书
学历公证书范本
2014/04/09 职场文书
横幅标语大全
2014/06/17 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Python 语言实现六大查找算法
2021/06/30 Python