Vue.js Modificateurs Chaîne

Question

Je suis nouveau dans Vue.js. Je lis docs, et ne peut pas comprendre un instant ...

https://vuejs.org/v2/guide/events.html

ordre lors de l'utilisation des modificateurs importe, car le code correspondant est généré dans le même ordre. Par conséquent, l'utilisation de @ click.prevent.self permettra d'éviter tous les clics alors que @ click.self.prevent empêchera uniquement les clics sur l'élément lui-même.

Je ne peux pas comprendre ce qui est dire » donc en utilisant @ click.prevent.self empêchera tous les clics alors que @ click.self.prevent empêchera seulement des clics sur l'élément lui-même. 'Quelqu'un peut-il donner un exemple avec Empêchez actions par défaut et afficher la différence ...

par exemple avec des liens (<a href="https://stackoverflow.com">@click.prevent.self="fn" or @click.self.prevent="fn" difference</a>)

Je connais les phases de l'événement (capture, cible et bouillonnants).

Par exemple, il peut être utile en phase Bubbling:

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

.root { 
    width: 300px; 
    height: 300px; 
    background: green; 
    text-align: center; 
    color: white; 
} 

.parent { 
    width: 200px; 
    height: 200px; 
    background: red; 
    text-align: center; 
    color: white; 
    margin: 50px 
} 

.child { 
    width: 100px; 
    height: 100px; 
    background: blue; 
    margin: 50px; 
    text-align: center; 
    color: white; 
} 

<div id="app"> 
    <div class="root" v-on:click="log('root')">root 
     <div class="parent" v-on:click.self.stop="log('parent')">Parent 
      <div class="child" v-on:click="log('child')">Child 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javasctipt"> 
    new Vue({ 
     el: '#app', 
     data: { 
     message: 'Hello Vue.js!' 
     }, 
     methods: { 
     log(message) { 
      alert(message); 
      console.log(message) 
     } 
     } 
    }) 
</script> 

Si je clique sur l'enfant que je vais obtenir une sortie:

child 
root 

Bubblig n'a pas arrêté! Mais si je clique sur le parentage bouillonnant arrêté! C'est utile!

Mais quelqu'un peut-il me montrer des exemples et des différences si j'utilise des modificateurs d'auto-prévention et d'auto-contrôle (avec des liens, des cases à cocher ou peut-être avec d'autres éléments)?

Merci d'avance!

Answer 1

Vous pouvez vérifier cet exemple: https://jsfiddle.net/50wL7mdz/39994/

Si vous utilisez @click.prevent.self, vous ne pouvez pas cliquer sur quoi que ce soit. Il empêche tout clic. Si vous utilisez @click.self.prevent, il empêche que lorsque vous cliquez sur l'élément <a>, nous pouvons toujours cliquer sur choisir le fichier à télécharger le fichier

Answer 2

exemple illustre la différence dans la chaîne pour

<div id="app"> 
    <a href="https://stackoverflow.com" @click.self.prevent target="_blank">Stackofervlow! 
    <span :style="{ background: 'yellow', width: '100px', height: '100px' }">span</span> 
    </a> 
</div> 

new Vue({ 
    el: '#app' 
}); 

@ click.self .prevent

1. Si vous cliquez sur span, stackoverflow va s'ouvrir.
2. Si vous cliquez sur un, stackoverflow ne s'ouvrira pas.

@Cliquez.éviter

1. Si vous cliquez sur durée, stackoverflow ne sera pas ouvert.
2. Si vous cliquez sur un, stackoverflow ne s'ouvrira pas.