Question

我不了解Vuejs2中的自定义事件。

我有一个名为user-navbar的组件包含一个下拉菜单，当我执行此方法时更改：

handleCurrentServerChange: function(name, zoneid, currency_name) {
    /* Code omitted */
    this.$emit('server-changed', { serverznid: zoneid });
},

发出一个名为server-changed的事件，我想在另一个组件accounts-linked中收听此事件。

 <accounts-linked inline-template :server_data="server_data" @server-changed="handleServer">

当发出事件时，我应该调用方法handleServer。但是没有用。这是方法：

handleServer: function(value) {
                alert(value);
}

我收到的错误很少

[Vue warn]: Property or method "handleServer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Invalid handler for event "server-changed": got undefined

我做错了什么？

Answer 1

server-changed事件只能在user-navbar的父级中捕获，如下所示：

<template>
    <user-navbar @server-changed="handleServer"></user-navbar>
</template>

如果accounts-linked不是user-navbar的父级，则您需要使用non-parent-child communication strategy，如Vue.js文档中所述。

Answer 2

搜索@exclsr提到的内容我找到了Jsfiddle并将其应用于我的代码：

app.js

Vue.use({
install(V) {
    let bus = new Vue();
    V.prototype.$bus = bus;
    V.bus = bus;
}     
});

在组件中：

this.$bus.$emit('server-changed', 1);
this.$bus.$on('server-changed', this.handleServer);

现在正常工作！：）

Vuejs2中的自定义事件

2 个答案: