国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社區(qū)

學(xué)習(xí)

工具庫(kù)

AI工具

休閑

簡(jiǎn)體中文

javascript - vue如何根據(jù)配置監(jiān)聽(tīng)的事件類(lèi)型？

僅有的幸福 2017-06-12 09:32:45

688

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

比如上面的組件，我希望 v-on監(jiān)聽(tīng)的事件是父組件傳遞過(guò)來(lái)的，而不是在這里寫(xiě)死為click，我該怎么寫(xiě)？

我當(dāng)然知道使用props傳遞，我想知道v-on后面該怎么寫(xiě)。如果直接寫(xiě)propname的話vue會(huì)認(rèn)為要監(jiān)聽(tīng)的事件是propname，而不是具體的事件。

僅有的幸福

全部回復(fù)(2)

洪濤2017-06-12 09:34:45 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,
  },
})