suchen

Heim >Web-Frontend >js-Tutorial >Erklären Sie ausführlich, wie Sie this.$emit in vue.js verwenden

Erklären Sie ausführlich, wie Sie this.$emit in vue.js verwenden

亚连
亚连Original
2018-06-05 11:20:0510595Durchsuche

Jetzt werde ich Ihnen ein tiefgreifendes Verständnis davon vermitteln. $emit in vue.js hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Verständnis von this.emit in vue.js: this.emit('increment1', "Diese Position kann Parameter hinzufügen"); tatsächlich besteht seine Funktion darin, eine benutzerdefinierte Funktion auszulösen.

Sehen Sie sich das Beispiel an: 

<!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>

Weitere Analyse des obigen Beispiels:

1. Schauen Sie sich zuerst den benutzerdefinierten Komponenten-Schaltflächenzähler an und binden Sie die Methode: inkrementieren

2. Wenn Sie auf die Schaltfläche klicken, wird die Funktion inkrementiert emit(' increment1', „Diese Position kann Parameter hinzufügen“); . Und inkrementieren Die benutzerdefinierte Funktion inkrement2 wird während der Ausführung nicht ausgelöst, daher wird durch Klicken auf die zweite Schaltfläche die Funktion inkrementierenTotal2 nicht ausgeführt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Sass im Vue CLI Webpack (ausführliche Anleitung)

So ändern Sie den P-Tag-Text in jQuery-Wert

Implementieren Sie die Methode zum Hinzufügen und Zuweisen von Tag-Unterelementen in jQuery

Das obige ist der detaillierte Inhalt vonErklären Sie ausführlich, wie Sie this.$emit in vue.js verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die Passwortanzeige und verbergen die Umschaltfunktion in VueNächster Artikel：So implementieren Sie die Passwortanzeige und verbergen die Umschaltfunktion in Vue

In Verbindung stehende Artikel

Mehr sehen