javascript - Comment Vue configure-t-il les types d'événements qu'il écoute?

Question

Vue.component('button-counter', {
  template: '<button v-on:click="increment()">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
    }
  },
})

Par exemple, dans le composant ci-dessus, j'espère que l'événement écouté par v-on est transmis par le composant parent, au lieu de l'écrire sous la forme cliquez ici. Comment dois-je l'écrire ?

Bien sûr, je sais utiliser les accessoires pour réussir, je veux savoir comment écrire v-on plus tard. Si vous écrivez directement propname, Vue pensera que l'événement à surveiller est propname, et non l'événement spécifique.

Answer 1

La personne qui pose la question a des besoins particuliers. Si c'est le cas, vous devrez peut-être utiliser render代替template :

.

<p id="app">
  <button-counter :event="'click'">abc</button-counter>
</p>

const counter = Vue.component('button-counter', {
  render(createElement) {
    return createElement(
      'button', {
        on: {
          [this.event]: this.increment,
        },
      },
      `${this.counter}`,
    )
  },
  data() {
    return {
      counter: 0,
    }
  },
  props: {
    event: String
  },
  methods: {
    increment() {
      this.counter += 1
    },
  },
})

new Vue({
  el: '#app',
  components: {
    'button-counter': counter,
  },
})

Answer 2

Les composants parents transmettent des paramètres aux sous-composants via des accessoires. Les accessoires peuvent être des fonctions, vous pouvez donc transmettre une fonction aux sous-composants

.