Question

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

this.$emit('toggle-button')

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

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

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

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

例如，假设我们有：

let eventName = 'toggle-button'

如何在以下情况下使用此变量（eventName）代替确切的事件名称（切换按钮）：

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

Answer 1

在这种情况下，您可以使用$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>

Answer 2

如果您render your component using separate render function，这很容易：

export default {
    props: {
        eventName: {
            type: String,
        },
    },
    render: function (createElement) {
        return createElement('my-component', {
            on: {
                [this.eventName]: (event) => {
                    console.log('Received event!')
                }
            }
        })
    }
}

如果您的应用也需要渲染功能，则渲染功能还可以动态指定组件的名称

使用存储在VueJs变量中的事件名称

2 个答案: