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