VUE 全局變量的幾種實現(xiàn)方式
1、全局變量專用模塊
意思是說,用一個模塊(js or vue)管理這套全局變量,模塊里的變量用export (最好導出的格式為對象,方便在其他地方調(diào)用)暴露出去,當其它地方需要使用時,用import 導入該模塊
全局變量專用模塊Global.vue
const colorList = [ '#F9F900', '#6FB7B7', ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem] } export default { colorList, colorListLength, getRandColor }
模塊里的變量用出口暴露出去,當其它地方需要使用時,引入模塊全球便可。
需要使用全局變量的模塊html5.vue
<template> <ul> <template v-for="item in mainList"> <div class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()"> <router-link :to="'project/'+item.id">  <span>{{item.title}}</span> </router-link> </div> </template> </ul> </template> <script type="text/javascript"> import global from 'components/tool/Global' export default { data () { return { getColor: global.getRandColor, mainList: [ { id: 1, img: require('../../assets/rankIcon.png'), title: '登錄界面' }, { id: 2, img: require('../../assets/rankIndex.png'), title: '主頁' } ] } } } </script>
2、全局變量模塊掛載到Vue.prototype 里
Global.js同上,在程序入口的main.js里加下面代碼
import global_ from './components/tool/Global' Vue.prototype.GLOBAL = global_
掛載之后,在需要引用全局量的模塊處,不需再導入全局量模塊,直接用this就可以引用了,如下:
<script type="text/javascript"> export default { data () { return { getColor: this.GLOBAL.getRandColor, mainList: [ { id: 1, img: require('../../assets/rankIcon.png'), title: '登錄界面' }, { id: 2, img: require('../../assets/rankIndex.png'), title: '主頁' } ] } } } </script>
1和2的區(qū)別在于:2不用在用到的時候必須按需導入全局模塊文件
3、vuex
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)。因此可以存放著全局量。因為Vuex有點繁瑣,有點殺雞用牛刀的感覺。認為并沒有必要。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-08-08vue-admin-box第一步npm?install時報錯的處理
這篇文章主要介紹了vue-admin-box第一步npm?install時報錯的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01Vue使用provide各種傳值后inject獲取undefined的問題及解決
這篇文章主要介紹了Vue使用provide各種傳值后inject獲取undefined的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue3中結(jié)合ElementPlus實現(xiàn)彈窗的封裝方式
這篇文章主要介紹了Vue3中結(jié)合ElementPlus實現(xiàn)彈窗的封裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01Vue3中element-plus全局使用Icon圖標的過程詳解
我們在用vue開發(fā)網(wǎng)站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01mpvue微信小程序開發(fā)之實現(xiàn)一個彈幕評論
這篇文章主要介紹了mpvue小程序開發(fā)之 實現(xiàn)一個彈幕評論功能,本文通過實例講解的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11