电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue實現公共方法抽離

瀏覽:119日期:2022-12-20 15:59:48

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

不知道各位大神有什么見解或者建議,共同學習,希望能給大家一個參考,也希望大家多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 玻璃钢格栅盖板|玻璃钢盖板|玻璃钢格栅板|树篦子-长沙川皖玻璃钢制品有限公司 | 纯化水设备-EDI-制药-实验室-二级反渗透-高纯水|超纯水设备 | 专业音响设备_舞台音响设备_会议音响工程-首选深圳一禾科技 | SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | 南京交通事故律师-专打交通事故的南京律师 | 档案密集架_电动密集架_移动密集架_辽宁档案密集架-盛隆柜业厂家现货批发销售价格公道 | 十字轴_十字轴万向节_十字轴总成-南京万传机械有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 楼承板-开口楼承板-闭口楼承板-无锡海逵 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 炒货机-炒菜机-炒酱机-炒米机@霍氏机械| 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 塑料托盘厂家直销-吹塑托盘生产厂家-力库塑业【官网】 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 智能终端_RTU_dcm_北斗星空自动化科技 | 衬塑管道_衬四氟管道厂家-淄博恒固化工设备有限公司 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | 铝扣板-铝方通-铝格栅-铝条扣板-铝单板幕墙-佳得利吊顶天花厂家 elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 橡胶接头_橡胶软接头_可曲挠橡胶接头-巩义市创伟机械制造有限公司 | 伸缩节_伸缩器_传力接头_伸缩接头_巩义市联通管道厂 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 烘箱-工业烘箱-工业电炉-实验室干燥箱 - 苏州华洁烘箱制造有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 | 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | LINK FASHION 童装·青少年装展 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 塑料脸盆批发,塑料盆生产厂家,临沂塑料广告盆,临沂家用塑料盆-临沂市永顺塑业 | 篮球地板厂家_舞台木地板品牌_体育运动地板厂家_凯洁地板 |