javascript - vue如何根據設定監聽的事件類型?
仅有的幸福
仅有的幸福 2017-06-12 09:32:45
0
2
595
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監聽的事件是 父元件傳遞過來的,而不是在這裡寫死為click,我該怎麼寫?

我當然知道使用props傳遞,我想知道v-on後面該怎麼寫。如果直接寫propname的話vue會認為要監聽的事件是propname,而不是具體的事件。

仅有的幸福
仅有的幸福

全部回覆(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給字元件

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板