时间:2021-05-26
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>效果还可以,至少方法是对的,接下来进行方法抽离和传送参数
首先新建一个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
证明方法是行得通的,现在将组件内的参数传送到方法里
传参通过钩子函数内传过去,因为要绑定点击事件,所以直接在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}}<--------文末------------>
有一个坑
<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
不知道各位大神有什么见解或者建议,共同学习,希望能给大家一个参考,也希望大家多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
IDEA自定义pom依赖抽离公共代码,代码解耦,减少重复第一步:抽离公共部分的代码第二步:点击右侧工具栏的maven,刷新,点击skip跳过test第三步:点击
为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用。我使用了ES6语法,编写了这个方法。/***@paramtype请求类型,分为POST/GE
1.原生js操作domconstdom=getElementById(‘box')2.vue官方方法:refvue中的ref是把当前dom元素“抽离出来”,只要
背景随着业务的发展,自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同,所以这个公共组件就不能方便地被引用了。为解
背景随着业务的发展,自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同,所以这个公共组件就不能方便地被引用了。为解