Vue中實現全域性方法

2022-05-07 15:54:17 字數 943 閱讀 6041

內心背景:今天偶然上到論壇,看到關於vue的兩篇閱讀量破千,我tm膨脹了啊。趕快再寫一篇我開始用vue時遇到的問題。

現實背景:很多時候我們會在全域性呼叫一些方法。

實現方式兩種:官網的實現use方法,然後你也可以用野路子直接在vue.prototype上面定義。

先說野路子,因為其實野路子就是最根本的實現方式,官方的use實現也是一樣的,只是use很好的封裝了。

/*

*main.js中例項vue時新增方法

*/import vue from 'vue';

//這樣以後你就可以在該專案下的其他元件中使用hello了,直接呼叫 this.hello('正字表達獅')。

vue.prototype.hello = function(name)`)

}new vue()

原理很簡單,因為vue實質上就是乙個物件。大多數物件都會存在原型物件,在vue原型上新增了方法之後,new vue()例項化時vm就繼承了該方法。因為其他元件也會繼承vm所以所有的元件都可以呼叫該方法。接下來看看vue.use()。

首先我新建乙個deta.js。裡面封裝乙個物件。

const date = ,

ticktotime(tick)

}const install = function(vm, options)

export default

可以看到裡面有乙個install方法,然後將該方法暴露出來。install方法是必須的,可看官網use相關部分。我們發現install裡面其實就是我們野蠻的第一中種方式。install當中的vm實際上就是vue這個物件。所以本質上兩種方式都是在vue原型上面新增了方法。當然建議大家在工作中不要使用第一種方法。因為別人會覺得你很low啊,而且你的main檔案會莫名其妙多很多**,自己看著也很難受啊。

這些也只是工作時看到的問題如果有什麼不對的,也歡迎討論

vue中全域性公共方法呼叫

首先,在assets資料夾下,新建js資料夾,建立common.js export default 如果是全域性 多頁面 使用 1.在main.js中引入 引入公共js import common from assets js common.js vue.prototype.common commo...

vue 定義全域性的 方法

一,建立 obj.js 檔案 function delobj fn else console.log fn,過濾成功 export default 二,main.js 引入 掛載全域性 import delobj from utils delobj vue.prototype.obj delobj ...

vue開發 vue全域性元件的方法

在vue專案中,可以自定義元件像vue resource一樣使用vue.use 方法來使用,具體實現方法 1 首先建乙個自定義元件的資料夾,比如叫loading,裡面有乙個index.js,還有乙個自定義元件loading.vue,在這個loading.vue裡面就是這個元件的具體的內容,比如 lo...