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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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 empty() 检查一个变量是否为空
2011/11/10 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php提取微信账单的有效信息
2018/10/01 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python简单实现AES加密和解密
2019/03/28 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
创先争优活动方案
2014/02/12 职场文书
客服专员岗位职责
2014/02/28 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
爱国主义影片观后感
2015/06/18 职场文书
结婚仪式主持词
2015/06/29 职场文书
Python天气语音播报小助手
2021/09/25 Python