时间戳

首页 > 解决方案 > 来自常量的 Vue.js 自定义事件

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

问题描述

我有一个发布某些事件的 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}}语法，但希望这个想法是有意义的。这可能吗？

标签： vue.jsevent-handlingconstants

解决方案

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

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

但有一些警告：

  • 您可以在;中使用的内容有几个限制。[]
  • 对于event_name要在模板中使用的常量，模板必须可以访问它，这意味着它应该是一个data属性、一个计算的或类似的。仅仅在 vue 组件之外的脚本中声明是不够的。
  • 属性将被解析为小写，因此您的常量必须是event_name，而不是EVENT_NAMEor Event_Name（您甚至可以使用它们，但它们将被视为event_name；请参阅data下面的声明）。

工作演示：

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>

推荐阅读