$emit 不触发 child 事件

Question

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

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

在 child 组件上我有：

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

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

Answer 1

从 parent 到 child 的事件在 Vue 1.0 中用 $broadcast() 完成，在 Vue 2.0 中根本不可能。

而且您可能不需要它，通常有比不需要事件更好的解决方案，但这取决于您的用例。

Answer 2

与documentation相比：

In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.

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

Answer 3

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

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

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

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

Answer 4

您可以为此使用自定义 Vue 实例。

// Globally
const eventBus = new Vue()

// In your child
eventBus.$on('eventName', () => {
    // Do something
});

// In your parent
eventBus.$emit('eventName')

Answer 5

我需要为弹出窗口执行此操作，其中可能存在多个弹出窗口，但每个弹出窗口的道具都不合适。

要分派全局事件，可以将事件侦听器添加到 $root Vue 实例。

// Child:
    created() {
      this.$root.$on('popover', (e) => {
        // Determine if popover should close, etc.
        this.close()
      })
    },
    
// Parent: 
  this.$emit('popover', 'arg1', 'argn')

记得在 destroyed 中也调用 $off。

$emit 不触发 child 事件

$emit doesn't trigger child events

vue.js

vue-component

vuejs2