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('on key down') } } }</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('on key down') } } }</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: 'I am componnet a' } }, methods: { emitMyEvent () {// 触发自定义事件 my-event 并传递一个参数 this.hello this.$emit('my-event', 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 './components/a.vue' 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
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!