vue中的公共方法調(diào)用方式
vue公共方法調(diào)用
首先，在assets文件夾下，新建js文件夾，創(chuàng)建common.js
export default {?? ?
? ? ?? ?text(){
?? ??? ?
?? ??? ?console.log("測(cè)試，測(cè)試?。?！")
?? ?}
?? ??? ??? ?
}（1）如果是全局（多頁(yè)面）使用
1.在main.js中引入
/* 引入公共js*/ import common from '@/assets/js/common.js' Vue.prototype.common=common;
2.在vue中使用
this.common.text(); ? ?//測(cè)試，測(cè)試?。?！
（2）如果是單頁(yè)面使用
1.在vue的script中引入
import common from '@/assets/js/common.js'
2.在vue中使用
common.text(); ? ?//測(cè)試，測(cè)試?。。?/pre>
區(qū)別：static文件夾一般用來(lái)存放外部資源；assets文件夾一般存放自身資源
vue如何封裝和調(diào)用公共方法
業(yè)務(wù)中經(jīng)常會(huì)碰見(jiàn)同一方法需要多次調(diào)用，這時(shí)候如果每次都寫(xiě)一遍就顯得代碼不夠優(yōu)雅了，所以封裝公共方法是非常有必要的
第一步：
封裝公共方法
1.在vue項(xiàng)目中src/assets/js/創(chuàng)建js文件 例：common.js
2.在main.js 引用common->然后實(shí)例化
/* 引入公共函數(shù) */ import common from './assets/js/common' Vue.use(common);
3.common.js寫(xiě)一個(gè)示例
export default {
? install(Vue) {
? ? Vue.prototype.hand = function() {
? ? ? alert("a");
? ? };
? }
};這里我們就封裝好了示例公共方法,接著我們?nèi)绾物@示調(diào)用
調(diào)用公共方法
1.在任何一個(gè)vue文件里面的生命周期this.方法名就可以了，因?yàn)橐呀?jīng)在main.js全局實(shí)例化了
created(){
? ?this.hand()?
}2.頁(yè)面就會(huì)調(diào)用方法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?el-pagination分頁(yè)查詢封裝的示例代碼
本文主要介紹了vue?el-pagination分頁(yè)查詢封裝的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪
這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單，今天通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
關(guān)于Vue中使用alibaba的iconfont矢量圖標(biāo)的問(wèn)題
這篇文章主要介紹了Vue使用alibaba的iconfont矢量圖標(biāo)的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊
這篇文章主要介紹了如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目.文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue input輸入框中的值如何變成黑點(diǎn)問(wèn)題
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
element-ui?tree?手動(dòng)展開(kāi)功能實(shí)現(xiàn)(異步樹(shù)也可以)
這篇文章主要介紹了element-ui?tree?手動(dòng)進(jìn)行展開(kāi)（異步樹(shù)也可以）,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，需要的朋友可以參考下2022-08-08