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 控制CSS样式表
Aug 20 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
React实现全选功能
Aug 25 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
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
浅谈node的事件机制
2017/10/09 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python with用法实例
2015/04/14 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python实现Kmeans聚类算法
2020/06/10 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
计算机应用专业推荐信
2013/11/13 职场文书
农村党员一句话承诺
2014/05/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书