280 votes

Vue v-on: le clic ne fonctionne pas sur le composant

J'essaie d'utiliser la directive on click à l'intérieur d'un composant, mais cela ne semble pas fonctionner. Lorsque je clique sur le composant, rien ne se passe lorsque je devrais avoir un "test effectué sur" dans la console. Je ne vois aucune erreur dans la console, donc je ne sais pas ce que je fais mal.

index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 

App.vue

 <template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>
 

Test.vue (le composant)

 <template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 

486voto

Saurabh Points 29563

Si vous souhaitez écouter un événement natif sur l'élément racine d'un composant, vous devez utiliser le modificateur .native pour v-on , comme suit:

 <template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>
 

ou en abrégé, comme suggéré dans le commentaire, vous pouvez également:

 <template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>
 

61voto

Jim McNeely Points 111

Je pense que la fonction $emit fonctionne mieux pour ce que je pense que vous demandez. Il maintient votre composant séparé de l'instance Vue afin qu'il soit réutilisable dans de nombreux contextes.

 <template>
  <div id="app">
    <test @click="$emit('test-click')></test>
  </div>
</template>
 

Utilisez-le en HTML

 <test @test-click="testFunction">
 

30voto

OddMorning Points 31

C'est le @Pes de réponse , mais avec des détails.


Note: @Saurabh la réponse est plus approprié si vous ne souhaitez pas modifier votre composant ou n'ont pas accès à elle.


Pourquoi ne peut - @cliquez sur juste travailler?

Les composants sont compliquées. Un composant peut être une petite fantaisie bouton wrapper, et une autre peut être tout un tableau avec des tas de logique à l'intérieur. Vue ne savons pas exactement ce que vous attendez lorsque bind v-model ou utiliser v-on de sorte que tous qui devraient être traitées par un composant du créateur.

Comment gérer l'événement click

Selon la Vue docs, $emit passe événements de parent. Exemple de docs:

Fichier principal

<blog-post
  @enlarge-text="onEnlargeText"
/>

Composant

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

(@ est le v-on d'abréviation)

Ce composant gère en natif click événement et émet des parents @enlarge-text="..."

enlarge-text peut être remplacé par click , pour faire croire que nous sommes la manipulation d'un natif cliquez sur l'événement:

<blog-post
  @click="onEnlargeText"
></blog-post>
<button @click="$emit('click')">
  Enlarge text
</button>

Mais ce n'est pas tout. $emit permet de passer d'une valeur spécifique à un événement. Dans le cas des natifs click, la valeur est MouseEvent (JS événement qui n'a rien à voir avec Vue).

Vue de magasins que l'événement en $event variable. Donc, ce serait la meilleure à émettre $event avec un événement à créer l'impression d'natif d'utilisation de l'événement:

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>

21voto

Neps Points 769

Un peu verbeux mais voici comment je le fais:

@click="$emit('click', $event)"

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X