Liaison d'événement Vue.js - liaison d'événement intégrée, liaison d'événement personnalisée

Cette fois, je vous présente la liaison d'événement de Vue.js - liaison d'événement intégrée, liaison d'événement personnalisée, liaison d'événement utilisant Vue.js - liaison d'événement intégrée, personnalisation Quels sont les précautions pour la liaison événementielle ? Voici un cas pratique, y jeter un œil.

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

peut être abrégé en

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

Liaison d'événement intégrée

Empêcher les événements bouillonnants

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

Événements couramment utilisésModifier:keydown

Le contenu d'entrée ou les modifications de contenu dans la zone de saisie @keydown déclencheront l'exécution

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

Déclenché lorsque la touche Entrée du clavier est enfoncée en spécifiant le modificateur @keydown. enter Vous pouvez également utiliser le code clé lors de l'exécution de
 : par exemple, @keydown.13; pour obtenir le même effet

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

Liaison d'événement personnalisée

La liaison d'événement personnalisée est généralement utilisée dans customDéfinir le composant
Le code sur le composant personnalisé a.vue est le suivant

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

Dans le composant appelé

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

Je te crois J'ai lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Méthode de mise à jour synchrone des données de liste dans Vue.js

Rendu de liste v dans Vue.js -pour le sous-composant d'objet tableau

Rendu de texte de Vue.js

Quelles sont les précautions d'utilisation de Vue.js

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!