12

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

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

在我的子组件上：

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

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

4

5 回答 5

23

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

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

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

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

于 2016-11-16T20:38:36.777 回答
21

与文档一样：

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

在此处输入图像描述

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

于 2016-11-16T17:08:42.690 回答
11

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

// Globally
const eventBus = new Vue()

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

// In your parent
eventBus.$emit('eventName')
于 2016-11-26T11:33:57.927 回答
8

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

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

于 2016-11-16T17:07:04.463 回答
1

我需要为一个可能存在多个并且每个道具都不合适的弹出框执行此操作。

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

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

记住也要取消 $off destroyed。

于 2019-01-28T22:37:09.913 回答