vue中的公共方法調(diào)用方式
更新時(shí)間：2022年09月21日 14:06:55 作者：酷jjs
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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(); ? ?//測試，測試?。?！
區(qū)別：static文件夾一般用來存放外部資源；assets文件夾一般存放自身資源
vue如何封裝和調(diào)用公共方法
業(yè)務(wù)中經(jīng)常會(huì)碰見同一方法需要多次調(diào)用，這時(shí)候如果每次都寫一遍就顯得代碼不夠優(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寫一個(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.頁面就會(huì)調(diào)用方法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue3實(shí)現(xiàn)HTML內(nèi)容預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)HTML內(nèi)容預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
本文主要介紹了Vue3?全局切換字體大小的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
解決element-ui el-input賦值后不能編輯的問題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個(gè)DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能
這篇文章介紹了vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
在Vue3中生成動(dòng)態(tài)的word文檔的示例代碼
這篇文章主要介紹了如何在 Vue 3 中生成動(dòng)態(tài)的 Word 文檔,在開發(fā)過程中遇到一個(gè)需求,動(dòng)態(tài)生成一個(gè)word報(bào)表,當(dāng)時(shí)考慮了是前端做還是后端做的問題,最后發(fā)現(xiàn)兩個(gè)解決需求的方法都大差不差,但考慮到前端少發(fā)一個(gè)請(qǐng)求,就此使用的前端來解決,需要的朋友可以參考下2024-09-09