Maison  >  Article  >  interface Web  >  Comment créer et appeler des méthodes globales dans vuejs

Comment créer et appeler des méthodes globales dans vuejs

青灯夜游
青灯夜游original
2021-09-26 18:30:044494parcourir

Créez et appelez une méthode globale : 1. Personnalisez une méthode sous n'importe quel fichier du répertoire src du projet vue ; 2. Utilisez l'instruction import dans le fichier "main.js" pour introduire la méthode personnalisée et montez la méthode sur Sur l'instance vue ; 3. Sur la page requise, utilisez l'instruction "$vue instance.method name()" pour appeler la méthode.

Comment créer et appeler des méthodes globales dans vuejs

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Vue.js crée et appelle des méthodes globales

Dans le projet vue, personnalisez d'abord une méthode sous n'importe quel fichier dans src, par exemple comme suit

  transNum (num) {
    if (typeof (num) === 'undefined') {
      return 0
    } else {
      let oldNum = num.toString().trim()
      let len = oldNum.length
      if (len <= 3) {
        return num
      } else {
        let newNum = oldNum.substr(0, len - 3) + &#39;.&#39; + oldNum.charAt(len - 3) + &#39;k&#39;
        return newNum
      }
    }
  }

Méthode 1 : Monter sur l'instance Vue

Exemple : introduisez cette méthode dans le fichier main.js du projet vue et montez cette méthode sur l'instance vue. Ajoutez le code suivant au fichier main.js

import myutil from &#39;@/common/utils/util.js&#39;

Vue.prototype.$myutil = myutil

Lorsque vous l'utilisez, vous pouvez directement utiliser

$myutil.transNum(num)

Méthode 2 : Importer

via l'importation et appeler la méthode

import util from &#39;@/common/utils/util.js&#39;&#39;

du fichier qui doit le faire. appelez cette méthode

util.transNum(num)

Remarque :

Si vous souhaitez écrire l'appel de méthode dans {{}}, vous ne pouvez introduire la méthode que par la première méthode. La raison spécifique est liée au cycle de vie de vue, donc je n'y vais pas. dans les détails.

Recommandations associées : "Tutoriel vue.js"

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn