web-dev-qa-db-fra.com

Lier par programme des événements personnalisés pour les composants dynamiques dans VueJS

Dans mon application vuejs, j'utilise le composant dynamique de la manière suivante:

<mycomponent>
  <component ref="compRef" :is="myComponent" v-bind="myComponentProps"></component>
  <div class="my-buttons">        
    <my-button label="Reset" @click="reset()"/>
  </div>
</mycomponent >

myComponent est un accessoire du composant parent qui contient le composant réel à injecter. myComponentProps sont également prop qui contient les porps pour l'instance injectée.

Je voudrais savoir comment puis-je également lier dynamiquement des écouteurs au composant - j'ai compris que je ne peux pas envoyer un objet à v-on avec plusieurs événements.

Je pensais l'ajouter par programme mais je n'ai trouvé aucune information sur la façon dont cela peut être fait pour Vue événements personnalisés (genre pour addEventListener équivalent pour les événements personnalisés)

Tout conseil serait très apprécié!

vue.jsvuejs2
11
Myupe

Avec Vue 2.2+, vous pouvez ajouter par programme un écouteur d'événements avec $on(eventName, callback) :

new Vue({
  el: '#app',
  created() {
    const EVENTS = [
      {name: 'my-event1', callback: () => console.log('event1')},
      {name: 'my-event2', callback: () => console.log('event2')},
      {name: 'my-event3', callback: () => console.log('event3')}
    ]

    for (let e of EVENTS) {
      this.$on(e.name, e.callback); // Add event listeners
    }

    // You can also bind multiple events to one callback
    this.$on(['click', 'keyup'], e => { console.log('event', e) })
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <div>
    <!-- v-on:EVENTNAME adds a listener for the event -->
    <button v-on:click="$emit('my-event1')">Raise event1</button>
    <button v-on:click="$emit('my-event2')">Raise event2</button>
    <button v-on:click="$emit('my-event3')">Raise event3</button>
  </div>
  <div>
    <!-- v-on shorthand: @EVENTNAME -->
    <button @click="$emit('my-event1')">Raise event1</button>
    <button @click="$emit('my-event2')">Raise event2</button>
    <button @click="$emit('my-event3')">Raise event3</button>
  </div>
</div>

Avec Vue 2.6+, vous pouvez ajouter dynamiquement un écouteur d'événements dans le modèle:

new Vue({
  el: '#app',
  data: {
    eventname: 'click',
  },
  methods: {
    handler(e) {
      console.log('click', e.target.innerText)
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <button @[eventname]="handler">Raise dynamic event</button>

  <!-- Set dynamic key to null to remove event listener -->
  <button @click="eventname = null">Unbind event</button>
</div>

Vous pouvez également lier de manière déclarative plusieurs écouteurs d'événements avec v-on="{event1: callback, event2: callback, ...}":

new Vue({
  el: '#app',
  methods: {
    onClick() { console.log('click') },
    onKeyUp(e) { console.log('keyup', e.keyCode) }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
</div>
35
tony19