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