Почему не получается передать пользовательское событие родительскому компоненту?

Чтобы передать пользовательское событие из дочернего компонента родительскому компоненту во Vue.js, необходимо использовать механизм "Event Bus" или передавать функцию обратного вызова (callback function).

1. Механизм "Event Bus":
Механизм "Event Bus" позволяет создать глобальный объект, который будет играть роль шины событий, на которую компоненты могут подписываться и отправлять события. Для использования "Event Bus" вам понадобится создать новый экземпляр Vue и экспортировать его:

// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

Затем в дочернем компоненте вы можете вызвать метод $emit на экземпляре "Event Bus", чтобы отправить пользовательское событие:

// ChildComponent.vue
import { EventBus } from '../EventBus.js'
export default {
  methods: {
    emitEvent() {
      EventBus.$emit('customEvent', data)
    }
  }
}

А в родительском компоненте вы можете подписаться на это событие, используя метод $on:

// ParentComponent.vue
import { EventBus } from '../EventBus.js'
export default {
  created() {
    EventBus.$on('customEvent', this.handleCustomEvent)
  },
  destroyed() {
    EventBus.$off('customEvent', this.handleCustomEvent)
  },
  methods: {
    handleCustomEvent(data) {
      // обработка события
    }
  }
}

Теперь когда дочерний компонент вызывает метод emitEvent(), событие будет передано в родительский компонент.

2. Передача функции обратного вызова:
Если вам необходимо передать данные из дочернего компонента в родительский, вы можете передать функцию обратного вызова и вызвать ее в дочернем компоненте с необходимыми данными:

// ChildComponent.vue
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', data)
    }
  }
}

В родительском компоненте вы можете прослушивать это событие и вызывать функцию, которую вы передали:

// ParentComponent.vue
export default {
  methods: {
    handleCustomEvent(data) {
      // обработка события
    }
  }
}

В шаблоне родительского компонента вы можете указать, что функция обратного вызова должна быть вызвана при возникновении пользовательского события:

<ChildComponent @customEvent="handleCustomEvent" />

Теперь, при вызове метода sendData() в дочернем компоненте, функция handleCustomEvent() будет вызвана в родительском компоненте соответствующим образом.