首页 文章

以编程方式绑定VueJS中动态组件的自定义事件

提问于
浏览
2

在我的vuejs应用程序中,我使用动态组件,方法如下:

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

myComponent 是父组件上的prop,用于保存要注入的实际组件 . myComponentProps 也是支持注入实例的porps的prop .

我想知道如何动态地将侦听器绑定到组件 - 我已经理解I cannot将对象发送到具有多个事件的v-on .

我正在考虑以编程方式添加它,但是没有找到有关如何为Vue自定义事件执行的任何信息(对于自定义事件的 addEventListener 等效类型)

任何提示将不胜感激!

1 回答

  • 13

    使用Vue 2.2.0,您可以使用$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
        }
      }
    })
    
    <script src="https://unpkg.com/vue@2.5.13"></script>
    <div id="app">
      <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>
    

    您还可以使用 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/vue@2.5.13"></script>
    <div id="app">
      <input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
    </div>
    

相关问题