Vue.js - 从子级向父级发出事件

Question

我无法将$emit事件从子组件发送到其父组件。我可以成功发送事件，但无法在父级中接收它。

Results.vue（孩子）：

<a href="#" v-on:click="sendResultValues"></a>

// 

methods: {
    sendResultValues: function () {
        this.$emit('send-result-values', 'carrier');
    }
},

当我单击 时<a>，我可以使用 Vue DevTools 看到$emit触发了一个事件：

但是，console.log 中没有收到任何内容，如下我的代码（父级）：

Input.vue（家长）：

<search-results></search-results> //Results.vue component
<search-popover v-on:send-result-values="showResultData"></search-popover>
 //
methods: {
    showResultData: function () {
        console.log("Data received from child: ")
    }
 },

Answer 1

您需要监听search-results组件上的事件，而不是search-popover.

输入.vue（父级）：

<search-results v-on:send-result-values="showResultData"></search-results>
<search-popover></search-popover>

methods: {
    showResultData: function () {
        console.log("Data received from child: ")
    }
 },