vue appelle des méthodes dans js externe

Vue est un framework JavaScript très populaire et largement utilisé dans le développement d'applications Web. Le framework Vue fournit de nombreuses fonctions pratiques qui rendent le processus de développement d'applications Web très simple. Cependant, dans le processus de développement d'applications utilisant le framework Vue, nous devons parfois appeler des méthodes dans des fichiers JS externes. Cet article explorera comment appeler des méthodes dans des fichiers JS externes dans une application Vue.

Pour appeler des méthodes dans des fichiers JS externes dans les applications Vue, nous devons effectuer les étapes suivantes :

Étape 1 : Introduire les fichiers JS externes dans les applications Vue

Dans les applications Vue, nous pouvons utiliser des balises de script pour importer des fichiers JS externes. le fichier est importé. Pour introduire des fichiers JS externes, nous pouvons ajouter des balises de script dans la balise template du fichier Vue. Par exemple, nous pouvons introduire un fichier JS externe nommé hello.js comme ceci :

<template>
  <div>
    <h1>调用外部JS文件中的方法</h1>
  </div>
</template>

<script src="./hello.js"></script>

Étape 2 : Définir les composants Vue

Dans une application Vue, nous devons définir les composants Vue afin qu'ils puissent être appelés dans des modèles. Nous pouvons définir des composants Vue dans les fichiers Vue. Par exemple, le code suivant définit un composant Vue appelé HelloWorld :

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      greeting: "Hello, World!",
    };
  },
};
</script>

Étape 3 : Appeler des méthodes dans des fichiers JS externes

Une fois que nous avons introduit le fichier JS externe dans l'application Vue et que le composant Vue est défini, nous pouvons appeler des méthodes dans des fichiers JS externes à l'intérieur des composants Vue. Afin d'appeler des méthodes dans des fichiers JS externes, nous devons utiliser la fonction hook créée de l'instance Vue. Tout d’abord, nous devons nommer le composant Vue en utilisant l’attribut ref. Par exemple, nous pouvons nommer le composant HelloWorld hello-world. Ensuite, nous pouvons utiliser l'attribut $refs dans la fonction hook créée pour accéder au composant Vue.

<template>
  <div>
    <hello-world ref="hello"></hello-world>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    this.$nextTick(() => {
      this.$refs.hello.setGreeting("Hello, Vue!");
    });
  },
};
</script>

Il y a quelques points clés à noter dans l'extrait de code ici :

• Tout d'abord, nous nommons le composant HelloWorld avec l'attribut ref et référençons le composant en utilisant ce nom dans l'instance Vue.
• Ensuite, dans la fonction hook créée, nous accédons au composant HelloWorld en utilisant l'attribut $refs. La propriété $refs est un objet qui contient des références aux composants Vue.
• Enfin, nous avons appelé la méthode setGreeting, en lui passant la chaîne "Hello, Vue !" Nous avons défini la méthode setGreeting dans le fichier hello.js, donc cette ligne de code appellera la méthode setGreeting dans le fichier hello.js et lui transmettra les paramètres.

Voici le contenu du fichier hello.js :

function setGreeting(greeting) {
  document.getElementById("greeting").innerText = greeting;
}

module.exports = {
  setGreeting,
};

Dans le fichier hello.js, nous définissons une méthode appelée setGreeting et l'exportons pour qu'elle soit utilisée par d'autres fichiers JavaScript. La fonction de cette méthode est de définir le contenu textuel de l'élément de salutation avec la chaîne qui lui est transmise.

Grâce à cet article, nous avons appris à appeler des méthodes dans des fichiers JS externes dans les applications Vue. Nous avons appris à importer des fichiers JS externes et à définir des composants Vue, et avons démontré comment utiliser l'attribut $refs dans le composant Vue pour accéder aux méthodes du fichier JS externe. Ces conseils peuvent vous aider à utiliser le framework Vue plus facilement et apporter plus de flexibilité au développement de votre application Web.

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!