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 相关文章推荐
js href的用法
May 13 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
Vue页面骨架屏的实现方法
May 22 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
我的论坛源代码(六)
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python os模块简单应用示例
2019/05/23 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python程序如何进行保存
2020/07/03 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
运动会解说词50字
2014/01/18 职场文书
保护母亲河倡议书
2014/04/14 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
纪检监察建议书
2014/05/19 职场文书
党员思想汇报材料
2014/12/19 职场文书
沈阳故宫导游词
2015/01/31 职场文书