javascript - 如何在父组件中监听事件 $emit 而无需在 vuejs2 中声明 on{eventName}

Question

我想知道是否可以从子组件发出事件并在父组件中监听，而不使用方便的 @event{eventMame} 语法。我正在使用一个引入此问题的插件。

我正在使用 vuetable2 组件并将操作附加到行，我必须执行如下操作:

{
  name: '__component:custom-actions',
  title: 'Actions',
  titleClass: 'text-center',
  dataClass: 'text-center'
}

我无法/不知道如何使用 @ 将事件监听器附加到自定义操作组件。

我在创建的方法中尝试了以下操作:

created = () => {
  this.$on('eventName', this.methodName');
}

但这似乎不起作用。

在我正在执行的自定义操作组件中:

this.$emit('eventName');

Answer 1

不要使用粗箭头来定义创建的钩子(Hook)。 this 将指向 window，而不是 Vue，并且 this.methodName 和 this.$on 都将指向不明确的。使用

created(){
  this.$on('eventName', this.methodName');
}

或

created: function(){
  this.$on('eventName', this.methodName');
}

发表评论编辑

您可以使用总线通过多层组件进行通信。在您的组件之外，声明 bus .

const bus = new Vue();

在嵌套组件中

bus.$emit('eventName');

在你的 parent

created(){
  bus.$on('eventName', this.methodName');
}