vue定義全局變量和全局方法的方法示例
更新時間：2018年08月01日 13:39:23 作者：zxc19890923
這篇文章主要介紹了vue定義全局變量和全局方法的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、全局引入文件
1、先定義共用組件 common.vue
<script type="text/javascript">
// 定義一些公共的屬性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出這些屬性和方法
export default {
httpUrl,
commonFun
}
</script>
2、在需要使用的地方導入
<script>
// 導入共用組件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 賦值使用
globalHttpUrl: global.httpUrl
}
},
3、使用
<template>
{{globalHttpUrl}}
</template>
二、main.js中引入全局變量和方法
1、定義共用組件同上
2、main.js中引入并復制給vue
// 導入共用組件 import global from './common.vue' Vue.prototype.COMMON = global
3、使用
export default {
data () {
return {
username: '',
password: '',
// 賦值使用, 可以使用this變量來訪問
globalHttpUrl: this.COMMON.httpUrl
}
},
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細, 具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
今天小編就為大家分享一篇基于Vue 服務端Cookies刪除的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3的vue-router超詳細使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應式數(shù)據(jù)的復雜邏輯，我們都應該使用計算屬性，更多相關內(nèi)容需要的小伙伴可以參考一下2022-08-08
在做vue中大型項目的時候,官方推薦使用axios,但是原生的axios可能對項目的適配不友好,所以在工程開始的來封裝一下axios,下面這篇文章主要給大家介紹了關于axios請求二次封裝之避免重復發(fā)送請求的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3實現(xiàn)ai聊天對話框功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-12-12
在使用vue腳手架搭建前端工程時,經(jīng)常會遇到打包上線后的緩存問題,許多開發(fā)者會直接在index.html中加入類似以下代碼來解決緩存問題,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-11-11
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章為大家詳細介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。2016-10-10
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關于Vue中.env、.env.development及.env.production文件說明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-09-09