使用Vue原型自定义事件

Question

我现在有这样的东西:

// Emit event:
<btn @click="$emit('saveJsonFile') />
// Catch event:
<Component @saveJsonFile="doSomething" />

然而，我试图远离魔法字符串(事件)，相反，我想有一个文件与事件的名字作为常量。

的例子:

// events.js
export const EV_SAVE_JSON_FILE = 'saveJsonFile'

并使其成为全局实例:

import * as EVENTS from './events.js'
Vue.prototype.$EV = EVENTS

现在我这样使用它:

// Child
<btn @click="$emit($EV.EV_SAVE_JSON_FILE) />

但是我如何在父节点上使用它呢?我得到一个Vue ESLint错误，指出它是一个无效的v-on:v:on directives dont support the modifier 'ev_save_json_file'.

// Error
<Component @[$EV.EV_SAVE_JSON_FILE]="doSomething" />

我也试着让事件常数在小大写<Component @[$ev.ev_save_json_file]="doSomething" />，但相同的行为。

帮助!

Answer 1

我不认为vue模板可以解释动态v-on:xxx指令。但是，您可以通过使用通用v-on指令来实现您所描述的效果。细节:

https://github.com/vuejs/vue/issues/4703

所以它们是一样的:

<sample-component v-on:click="someHandler" />
<sample-component v-on="{ click: someHandler }" />

回到你的问题，你的组件可以这样重写:

<Component v-on="{ [$EV.EV_SAVE_JSON_FILE]: doSomething }" />