Comment définir et utiliser des variables globales et des fonctions globales dans Vue ? (avec code)

Ce que cet article vous apporte, c'est comment définir et utiliser des variables globales et des fonctions globales dans Vue ? (Le code est ci-joint), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Définir des variables et les utiliser globalement

Principe :
1. Créez séparément un nouveau fichier de module de variables globales, définissez certains états initiaux des variables dans le module et utilisez l'exportation par défaut pour les exposer.
2. Introduisez-le dans main.js et montez-le sur l'instance vue via Vue.prototype. À utiliser par d'autres fichiers de module
3. Ou introduisez-le directement dans le fichier de module requis pour l'utiliser

Répertoire du projet

Étape 1. Créez un nouveau global_variable.js fichier , utilisé pour stocker les variables, l'exemple est le suivant :

const baseURL = 'www.baidu.com'const token = '123456'const userSite = '林花落了春红，太匆匆'export default {
  baseURL,
  token,
  userSite
}

• Méthode 1 : Utilisation (référence locale) dans le fichier du module qui a besoin à utiliser, l'exemple est le suivant

• Méthode 2 : utilisation globale, l'exemple est le suivant :

1. Introduisez le fichier global_variable.js dans le fichier main.js et utilisez Vue.prototype pour l'accrocher sur l'instance vue. suit :

2. Utilisez-le si nécessaire Utilisé dans les fichiers du module (pas besoin de présentation, utilisez directement via this), l'exemple est le suivant :

2. Définir la fonction et l'utiliser globalement

Principe :

Créez un nouveau fichier de module, puis montez la fonction sur l'instance Vue via Vue.prototype dans main.js et exécutez la fonction via le nom de fonction généré par ceci.

Méthode 1. Écrivez la fonction directement dans main.js

Des fonctions simples peuvent être écrites directement dans main.js L'exemple est le suivant :

Méthode 2. Créez un nouveau fichier de module et montez-le sur main.js

Le répertoire du projet est le suivant

1 , L'exemple de code dans le fichier global_func.js est le suivant :

// param为传入参数
function packageFunc (param) {
  alert(param)
}

export default {  // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
  install: function (Vue) {
    Vue.prototype.global_func = (param) => packageFunc(param)
  }
}

2 L'exemple de code dans le fichier main.js est le suivant :

3. Dans le fichier du module qui doit être appelé Utiliser

dans l'appel, l'exemple de code est le suivant : this.输出的函数名

Recommandations associées :

Analyse complète de Vue - Vue+Vue-router+Vuex+axios

vue-cli écrivant une instance de plug-in Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!