$emit 不会触发子事件

Question

对于 VueJS 2.0 项目，我在父组件上有以下内容

<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>

在我的子组件上：

 {
  events: { 'childEvent' : function(){.... },
  ready() { this.$on('childEvent',...) },
  methods: { childEvent() {....} }
}

单击按钮似乎没有任何作用。是不是我需要创建一个父方法然后发送给孩子？我使用的是 vuejs 1。但现在我对父子通信的工作方式感到困惑

原文由 Kendall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然其他答案是正确的，但通常可以使用数据驱动的方法。

我将为任何需要道具以外的方法寻找此问题答案的人添加此内容。尝试将焦点设置在自定义表单组件内的特定输入时，我遇到了类似的问题。为此，我必须给自定义组件一个 ref 然后执行此操作。

 this.$refs.customInput.$emit('focus');
//or
this.$refs.customInput.directlyCallMethod();

这会访问子组件的 vue 实例，然后您可以发出该组件听到的事件。

原文由 qw3n 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

作为 文档 的一部分：

在 Vue.js 中，父子组件关系可以概括为 props 向下，事件向上。父级通过 props 将数据传递给子级，子级通过事件向父级发送消息。接下来让我们看看它们是如何工作的。

所以在最新的 Vue 中，你不能将事件从父级发送到子级，你可以将 props 传递给子级，并将事件从子级发送到父级。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议