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动画效果代码3
Apr 03 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
chrome原生方法之数组
Nov 30 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 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/03/04 星际争霸
php session_start()出错原因分析及解决方法
2013/10/28 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
再探JavaScript作用域
2014/09/24 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python Queue模块详解
2014/11/30 Python
Python中实现常量(Const)功能
2015/01/28 Python
Python实现去除代码前行号的方法
2015/03/10 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
暑期培训随笔感言
2014/03/10 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
教师对学生的评语
2014/04/28 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技