时间戳

首页 > 解决方案 > 使用存储在 VueJs 变量中的事件名称

vue.js - 使用存储在 VueJs 变量中的事件名称

问题描述

在 VueJS 中，子组件可以发出事件，例如：

this.$emit('toggle-button')

在父级中，我们可以按如下方式监听此事件：

<my-component v-on:toggle-button="doSomething"></my-component>

这很好用。但我有一个要求，将事件名称（在本例中为切换按钮）存储在变量或 Vuex 存储中。因此，我没有确切的事件名称，而是带有事件名称的变量或存储。

在这种情况下，在点击指令中引用该事件名称的语法是什么？

例如，假设我们有：

let eventName = 'toggle-button'

如何在以下内容中使用此变量 (eventName) 而不是确切的事件名称 (toggle-button)：

<my-component v-on:toggle-button="doSomething"></my-component>

标签： vue.jsvuejs2vue-directives

解决方案

您可以$on(EVENT_NAME, CALLBACK)在这种情况下使用：

// <my-component ref="foo" />
this.$refs.foo.$on(eventName, doSomething)


Vue.component('my-component', {
  template: `<button @click="$emit('click', $event)">Click</button>`
});

new Vue({
  el: '#app',
  mounted() {
    const eventName = 'click';
    this.$refs.foo.$on(eventName, this.doSomething);
  },
  methods: {
    doSomething() {
      alert('clicked');
    }
  }
})
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <my-component ref="foo" />
</div>

推荐阅读