vm. $ on listener не запускается из родительского метода mount ()

Question

Это кажется очень простым, но у меня не работает. Я пытаюсь запустить событие из дочернего компонента и прослушать его из родительского компонента, используя метод mounted(), используя метод экземпляра vm.$on() , но он не работает.

Для Например, я создал очень простое приложение c Vue CLI на CodeSandbox , чтобы воспроизвести проблему. Любая помощь будет принята с благодарностью.

Родительский компонент: App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  mounted() {
    this.$on('icecream', () => console.log('not good for children'));
  },
};
</script>

Дочерний компонент: HelloWorld.vue

<template>
  <div class="hello">
    <h3>Emit event from child and listen from parent</h3>
    <button @click="emitAnEvent()">Emit</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    emitAnEvent() {
      this.$emit('icecream');
    }
  },
};
</script>

Answer 1

Существует также другой вариант обработки $emit(), записанного в Vue документации здесь .

<HelloWorld v-on:icecream="CatchIceCream()" />
.
.
.
methods: {
    CatchIceCream() {
        console.log('not good for children');
    }
},

Answer 2

Неважно! Я смог понять это, основываясь на ответе здесь . Мне пришлось передать событие $emit() непосредственно в $parent, как показано ниже:

this.$parent.$emit('icecream');

Хотя это могло быть немного проблематично c в другом сценарии ios, в моем случае это вполне нормально.