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

есть еще способ решить эту проблему.

1. Вы можете использовать vuex.js
2. , вы можете использовать методы $ emit и $ on

например

vm.$emit('test', 'hi'); 
vm.$on('test', function (msg) { console.log(msg) }); // => "hi"

Answer 2

Вам нужно слушать событие на компоненте 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: ")
    }
 },