Vue.js-Ereignisbindung – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung

Dieses Mal präsentiere ich Ihnen die Ereignisbindung von Vue.js – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung, Ereignisbindung mit Vue.js – integrierte Ereignisbindung, Anpassung Was sind die Vorsichtsmaßnahmen für die Ereignisbindung? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

<button v-on:click="toggle">切换</button>

kann abgekürzt werden als

<button @click="toggle">切换</button>

Eingebaute Ereignisbindung

Sprudelnde Ereignisse verhindern

<button @click.stop="toggle">切换</button>

Häufig verwendete EreignisseModifikator:keydown

Eingegebener Inhalt oder Inhaltsänderungen im @keydown-Eingabefeld lösen die Ausführung aus

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

Wird ausgelöst, wenn die Eingabetaste über die Tastatur gedrückt wird, indem der Modifikator @keydown angegeben wird. enter Sie können beim Ausführen von
auch den Schlüsselcode verwenden: zum Beispiel @keydown.13; um den gleichen Effekt zu erzielen

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

Benutzerdefinierte Ereignisbindung

Benutzerdefinierte Ereignisbindung wird im Allgemeinen verwendet benutzerdefiniertKomponente definieren
Der Code auf der benutzerdefinierten Komponente a.vue lautet wie folgt

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>

In der aufgerufenen Komponente

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>

Ich glaube, das haben Sie Lesen Sie den Fall in diesem Artikel. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Synchronisierte Aktualisierungsmethode für Listendaten in Vue.js

Listenrendering v in Vue.js -für Array-Objekt-Unterkomponente

Textwiedergabe von Vue.js

Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js?

Das obige ist der detaillierte Inhalt vonVue.js-Ereignisbindung – integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!