简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > View.js > Hauptteil

Eine kurze Einführung in die grundlegende Ereignisverarbeitung in Vue

WBOY
Freigeben： 2022-08-08 17:32:50
nach vorne
1672 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über vue, der hauptsächlich verwandte Themen zur grundlegenden Vue-Ereignisverarbeitung vorstellt, die ein notwendiger Aspekt jedes Vue-Projekts ist. Es wird zum Erfassen von Benutzereingaben, zum Teilen von Daten und auf viele andere kreative Arten verwendet. Schauen wir es uns gemeinsam an, ich hoffe, es wird für alle hilfreich sein.

Eine kurze Einführung in die grundlegende Ereignisverarbeitung in Vue

【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】

Vue-Ereignisbehandlung ist ein notwendiger Aspekt jedes Vue-Projekts. Es wird zum Erfassen von Benutzereingaben, zum Teilen von Daten und auf viele andere kreative Arten verwendet.

In diesem Artikel werde ich die Grundlagen behandeln und einige Codebeispiele für den Umgang mit Ereignissen bereitstellen.

Grundlegende Ereignisbehandlung

Mit der v-on-Direktive (@, kurz) können wir DOM-Ereignisse abhören und Handler-Methoden oder Inline-Javascript ausführen: 

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />
Nach dem Login kopieren

Wir werden einige der häufigeren Ereignisse behandeln, die Sie möglicherweise erfassen möchten , Single Klicken Sie hier für eine vollständige Liste der DOM-Ereignisse.

Emittieren benutzerdefinierter Ereignisse

Ein häufiger Anwendungsfall in jedem Web-Framework besteht darin, dass eine untergeordnete Komponente Ereignisse an ihre übergeordnete Komponente ausgeben kann. Dies ermöglicht eine bidirektionale Datenbindung.

Ein Beispiel hierfür ist das Senden von Daten von einer Eingabekomponente an ein übergeordnetes Formular.

Die Syntax zum Ausgeben von Ereignissen unterscheidet sich je nachdem, ob wir die Options-API oder die Composition-API verwenden.

In der Options-API können wir dies einfach aufrufen.$emit(eventName, payload): 

export default {
  methods: {
    handleUpdate() {
      this.$emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
  }
}
Nach dem Login kopieren

Die Composition-API verfügt jedoch nicht über dies. Stattdessen können wir über die Vue3-Setup-Methode direkt auf die Emit-Methode zugreifen. Der zweite Parameter der

setup-Methode ist die Kontextvariable, die drei Attribute enthält: attrs, slots und emit.

Solange das Kontextobjekt importiert ist, kann emit mit denselben Parametern wie die Options-API aufgerufen werden. 

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Nach dem Login kopieren

Eine Möglichkeit, Ihren Code aufzuräumen, besteht darin, Objektdestrukturierung zu verwenden, um Emit direkt zu importieren. Es sieht so aus. 

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Nach dem Login kopieren

Unabhängig davon, ob wir die Options-API oder die Composition-API verwenden, lauscht unsere übergeordnete Komponente auf benutzerdefinierte Ereignisse auf die gleiche Weise. 

<HelloWorld @update=&#39;inputUpdated&#39;/>
Nach dem Login kopieren

Wenn der von uns ausgegebenen Methode auch ein Wert übergeben wird, können wir ihn auf zwei verschiedene Arten erfassen – je nachdem, ob wir inline arbeiten oder eine andere Methode verwenden.

Zuerst können wir den übergebenen $event-Wert in der Vorlage verwenden. 

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>
Nach dem Login kopieren

Zweitens: Wenn wir eine Methode zur Verarbeitung des Ereignisses verwenden, wird der übergebene Wert automatisch als erster Parameter an unsere Methode übergeben. 

<HelloWorld @update=&#39;inputUpdated&#39;/>

        

            

                
Beliebte Tutorials

                Mehr>
                
            

            

                

                    
Verwandte Tutorials 

                    
Beliebte Empfehlungen

                    
Aktuelle Kurse

                

                
                
                
            

            
        


        

            

                
Neueste Downloads

                Mehr>
                
            

                        
            

                

                    
Web-Effekte 

                    
Quellcode der Website

                    
Website-Materialien

                    
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！