来自常量的 Vue.js 自定义事件

Question

我有一个发布某些事件的 Vue.js 组件。

<MyComponent @some-event="myHandler"/>

在组件内部你有类似的东西

this.$emit('some-event', someData);

非常基本。但是为了使代码更清晰，如果我可以在某处的常量中定义一个字符串'some-event'，并且能够在声明事件处理程序时将它与$emit() 一起使用，那就太好了。像这样的：

const EVENT_NAME = 'some-event';

this.emit(EVENT_NAME, someData);

<MyComponent @{{EVENT_NAME}}="myHandler"/>

我刚刚编写了@{{EVENT_NAME}} 语法，但希望这个想法是有意义的。这可能吗？

Answer 1

您可以使用Dynamic Arguments，例如（作为event_name 常量）：

<MyComponent @[event_name]="myHandler" />

但有一些警告：

• several constraints 可以在[] 中使用；
• 对于要在模板中使用的event_name 常量，它必须可供模板访问，这意味着它应该是data 属性、计算属性或类似属性。仅仅在 vue 组件之外的脚本中声明是不够的。
• 属性将被解析为小写，所以你的常量必须是event_name，而不是EVENT_NAME或Event_Name（你甚至可以使用它们，但它们将被视为event_name；看看我如何声明@ 987654332@ 下方）。

工作演示：

const EVENT_NAME = 'some-event';

Vue.component(`my-component`, {
  template: `
    <button @click="myCompInternalHandler">click me to emit an event whose name is the value of event_name</button>
  `,
  methods: {
    myCompInternalHandler() {
      this.$emit(EVENT_NAME, {someData: 112233});
    }
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    event_name: EVENT_NAME // key has to be lowercase, because it is used in the template as dynamic attr
  },
  methods: {
    myHandler(e) {
      console.log('received at parent:', e);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-component @[event_name]="myHandler" />
  <p>{{ message }}</p>
</div>