$ 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.但现在我对父母与孩子沟通工作的方式感到困惑

Answer 1

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

我打算为寻找这个问题答案的人添加这个，而这个问题除了道具之外还需要其他方法。尝试将焦点设置在自定义表单组件中的特定输入时，我遇到了类似的问题。要做到这一点，我必须给自定义组件ref，然后执行此操作。

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

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

Answer 2

与documentation：

相同

  

在Vue.js中，父子组件关系可以概括为道具向下，事件向上。父母通过道具将数据传递给孩子，孩子通过事件向父母发送消息。让我们看看他们下一步的工作方式。

因此，在最新的Vue中，您无法将事件从父级发送到子级，您可以将道具传递给子级，并将事件从子级发送到父级。

Answer 3

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

// Globally
const eventBus = new Vue()

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

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

Answer 4

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

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

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。