javascript - Wie konfiguriert Vue die Ereignistypen, auf die es lauscht?
仅有的幸福
仅有的幸福 2017-06-12 09:32:45
0
2
583
Vue.component('button-counter', {
  template: '<button v-on:click="increment()">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
    }
  },
})

In der obigen Komponente hoffe ich beispielsweise, dass das Ereignis, das v-on abhört, von der übergeordneten Komponente übergeben wird, anstatt es als „Klicken Sie hier“ zu schreiben.

Natürlich weiß ich, wie man Requisiten zum Bestehen nutzt, ich möchte später wissen, wie man V-On schreibt. Wenn Sie propname direkt schreiben, geht Vue davon aus, dass das zu überwachende Ereignis propname und nicht das spezifische Ereignis ist.

仅有的幸福
仅有的幸福

Antworte allen(2)
洪涛

题主的需求比较特殊,如果是这样的话可能只能使用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,
  },
})
黄舟

父组件传参给字组件都是通过props的,props可以是function,所以你可以传一个function给字组件

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!