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: ")
    }
 },

原文由 oliverbj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

Input.vue（父级）：

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

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

原文由 Hammerbot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我看来，你应该在父端做事件声明等式。

你错了： <a href="#" v-on:click="sendResultValues"></a>

点击事件不应该是那个，它应该是发送结果值。所以结果是

<a href="#" v-on:send-result-values="sendResultValues"></a>

原文由 Muhammad Arya Dhika 发布，翻译遵循 CC BY-SA 4.0 许可协议