时间戳

首页 > 解决方案 > 为自定义事件使用 Vue 原型

vue.js - 为自定义事件使用 Vue 原型

问题描述

我目前有这样的事情：

// 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" />

我还尝试使事件在 small caps 中保持不变<Component @[$ev.ev_save_json_file]="doSomething" />，但行为相同。

帮助！

标签： vue.jsvue-component

解决方案

我不认为 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 }" />

推荐阅读