web-dev-qa-db-fra.com

comment émettre une valeur avec un événement click dans vue.js

Je suis la documentation de Vuejs et j'essaie d'émettre une valeur avec l'événement click.

Le code suit:

Modèle Vue:

<div id="app">
    <div class="container">
        <div class="col-lg-offset-4 col-lg-4">
            <sidebar v-on:incrementBtn="increment += $event"></sidebar>
            <p>{{ increment }}</p>
        </div>
    </div>
</div>

Instances Vue:

    Vue.component('sidebar',{
        template:`
            <div>
                <button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">Increment on click</button>
            </div>
        `,
    });

    new Vue ({
        el:'#app',
        data:{
            increment:0
        }
    });
vue.jsvue-component
6
Bablu Ahmed

Vérifiez Événement personnalisé Vue , Vue recommande toujours d'utiliser kebab-case pour les noms d'événement.

Et comme ci-dessus Vue a dit:

Contrairement aux composants et aux accessoires, les noms d'événements ne fournissent aucune transformation de casse automatique. Au lieu de cela, le nom d'un événement émis doit correspondre exactement au nom utilisé pour écouter cet événement.

Et

De plus, les écouteurs d'événements v-on dans les modèles DOM seront automatiquement transformés en minuscules (en raison de l'insensibilité à la casse de HTML), afin que v-on: myEvent devienne v-on: myevent - rendant myEvent impossible d'écouter .

Vue.component('sidebar',{
    template:`
        <div>
            <button class="btn btn-info" v-on:click="$emit('increment-btn', 1)">Increment on click</button>
        </div>
    `
})

new Vue ({
  el:'#app',
  data:{
      increment:0
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <div class="col-lg-offset-4 col-lg-4">
            <sidebar v-on:increment-btn="increment += $event"></sidebar>
            <p>{{ increment }}</p>
        </div>
    </div>
</div>
8
Sphinx