$ 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

作为文件的标准:

在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

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

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