Expliquez en détail comment utiliser this.$emit dans vue.js-js tutoriel-php.cn

Expliquez en détail comment utiliser this.$emit dans vue.js

亚连

Libérer： 2018-06-05 11:20:05

original

10531 Les gens l'ont consulté

Maintenant, je vais partager avec vous une compréhension approfondie de ceci.$emit dans vue.js Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Compréhension de this.emit dans vue.js : this.emit('increment1', "Cette position peut ajouter des paramètres"); en fait, sa fonction est de déclencher une fonction personnalisée.

Regardez l'exemple :

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<script src="vue.js"></script>
<body>
<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment1="incrementTotal1"></button-counter>
 <button-counter v-on:increment2="incrementTotal2"></button-counter>
</p>
</body>
<script>
 Vue.component(&#39;button-counter&#39;, {
 template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
 data: function () {
  return {
  counter: 0
  }
 },
 methods: {
  increment: function () {
  this.counter += 1;
  this.$emit(&#39;increment1&#39;,"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//  this.$emit(&#39;increment2&#39;); //此时不会触发自定义increment2的函数。
  }
 }
 });
 new Vue({
 el: &#39;#counter-event-example&#39;,
 data: {
  total: 0
 },
 methods: {
  incrementTotal1: function (e) {
  this.total += 1;
  console.log(e);
  },
  incrementTotal2: function () {
  this.total += 1;
  }
 }
 })
</script>
</html>

Copier après la connexion

Analyse plus approfondie de l'exemple ci-dessus :

1. Tout d'abord, regardez le compteur de boutons du composant personnalisé et liez la méthode :

Lorsque vous cliquez sur le bouton, la fonction d'incrémentation sera exécutée, et là. est-ce.$emit in incrément. ("increment1', "Cette position peut ajouter des paramètres");

3. Lorsque l'incrément est exécuté, la fonction personnalisée incrément1, qui est la fonction incrémentTotal1, sera déclenchée ;

4. La fonction personnalisée incrément2 n'est pas déclenchée lorsque l'incrément est exécuté, donc cliquer sur le deuxième bouton n'exécute pas la fonction incrémentTotal2.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Comment modifier le texte de la balise P dans Valeur jQuery

Implémenter la méthode d'ajout et d'attribution de sous-éléments de balise dans jQuery

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!