以编程方式为 VueJS 中的动态组件绑定自定义事件 [英] Programmatically bind custom events for dynamic components in VueJS

查看：33
本文介绍了以编程方式为 VueJS 中的动态组件绑定自定义事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的 vuejs 应用程序中，我通过以下方式使用动态组件:

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

</mycomponent >

myComponent 是父组件上的一个 prop，它包含要注入的实际组件.myComponentProps 也是持有注入实例的 porps 的 prop.

我想知道如何将侦听器动态绑定到组件 - 我知道 我无法将一个对象发送到带有多个事件的 v-on.

我正在考虑以编程方式添加它，但是还没有找到任何关于如何为 Vue 自定义事件完成它的信息(类似于 addEventListener 自定义事件的类型)

任何提示将不胜感激！

解决方案

使用 Vue 2.2+，您可以使用 $on(eventName, callback):

new Vue({el: '#app',创建(){常量事件 = [{名称:'我的事件1'，回调:()=>console.log('event1')},{名称:'我的事件2'，回调:()=>console.log('event2')},{名称:'我的事件3'，回调:()=>console.log('event3')}]for (let e of EVENTS) {this.$on(e.name, e.callback);//添加事件监听器}//也可以将多个事件绑定到一个回调this.$on(['click', 'keyup'], e => { console.log('event', e) })}})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></脚本><div id="应用程序"><div><!-- v-on:EVENTNAME 添加事件监听器 --><button v-on:click="$emit('my-event1')">引发 event1</button><button v-on:click="$emit('my-event2')">引发 event2</button><button v-on:click="$emit('my-event3')">引发 event3</button>

<div><!-- v-on 简写:@EVENTNAME --><button @click="$emit('my-event1')">引发 event1</button><button @click="$emit('my-event2')">引发 event2</button><button @click="$emit('my-event3')">引发 event3</button>

使用 Vue 2.6+，您可以动态添加事件监听器在模板中:

new Vue({el: '#app',数据: {事件名称:'点击'，},方法: {处理程序(e){console.log('click', e.target.innerText)}}})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></脚本><div id="应用程序"><button @[eventname]="handler">引发动态事件</button><!-- 将动态键设置为 null 以移除事件监听器 --><button @click="eventname = null">取消绑定事件</button>

您还可以使用 v-on="{event1: callback, event2: callback, ...}":

声明性地绑定多个事件侦听器

new Vue({el: '#app',方法: {onClick() { console.log('click') },onKeyUp(e) { console.log('keyup', e.keyCode) }}})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></脚本><div id="应用程序"><input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">

In my vuejs app I use dynamic component in the following way:

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

myComponent is a prop on the parent component which hold the actual component to inject. myComponentProps are also prop which holds the porps for the injected instance.

I would like to know how can I also dynamically bind listeners to the component - I have understand that I cannot send an object to v-on with multiple events.

I was thinking about adding it programatically however haven't found any info about how it can be done for Vue custom events (kind for addEventListener equivalent for custom events)

Any tip would be much appreciated!

解决方案

With Vue 2.2+, you can programmatically add an event listener with $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
    }

    // You can also bind multiple events to one callback
    this.$on(['click', 'keyup'], e => { console.log('event', e) })
  }
})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div>
    <!-- v-on:EVENTNAME adds a listener for the event -->
    <button v-on:click="$emit('my-event1')">Raise event1</button>
    <button v-on:click="$emit('my-event2')">Raise event2</button>
    <button v-on:click="$emit('my-event3')">Raise event3</button>
  </div>
  <div>
    <!-- v-on shorthand: @EVENTNAME -->
    <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>
</div>

With Vue 2.6+, you can add an event listener dynamically in the template:

new Vue({
  el: '#app',
  data: {
    eventname: 'click',
  },
  methods: {
    handler(e) {
      console.log('click', e.target.innerText)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <button @[eventname]="handler">Raise dynamic event</button>

  <!-- Set dynamic key to null to remove event listener -->
  <button @click="eventname = null">Unbind event</button>
</div>

You can also declaratively bind multiple event listeners with 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.6.8/dist/vue.min.js"></script>
<div id="app">
  <input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
</div>

这篇关于以编程方式为 VueJS 中的动态组件绑定自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆