0

在 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>
4

2 回答 2

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>

于 2018-10-11T10:01:15.487 回答
0

如果您使用单独的渲染函数渲染您的组件，这很容易：

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

渲染函数还具有动态指定组件名称的能力，如果您的应用程序也需要这样做的话

于 2018-10-11T10:08:38.580 回答