Как в дочернем элементе прослушать событие @click, которое произошло в родительском элементе, не используя Vuex?

Для того, чтобы в дочернем элементе прослушать событие @click, которое произошло в родительском элементе во Vue.js без использования Vuex, можно воспользоваться механизмом передачи событий через props и созданием пользовательского события.

1. В родительском компоненте создаем метод, который будет вызываться при клике на нужном нам элементе и генерировать пользовательское событие:

// Родительский компонент
<template>
  <div>
    <button @click="handleClick">Нажми меня</button>
    <ChildComponent @custom-click="onCustomClick" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick() {
      // Генерируем пользовательское событие
      this.$emit('custom-click');
    },
    onCustomClick() {
      console.log('Дочерний компонент получил событие @click от родительского компонента');
    },
  },
};
</script>

2. В дочернем компоненте добавляем прослушивание события @custom-click и вызываем нужный нам метод при его возникновении:

// Дочерний компонент
<template>
  <div>
    <button @click="handleCustomClick">Следи за мной</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomClick() {
      // Вызываем нужный нам метод при возникновении пользовательского события
      this.$emit('custom-click');
    },
  },
};
</script>

Таким образом, при клике на элемент в родительском компоненте, генерируется пользовательское событие с помощью this.$emit в методе handleClick(). В дочернем компоненте мы прослушиваем это событие @custom-click и вызываем нужный нам метод или выполняем нужную логику в методе handleCustomClick().

Этот подход позволяет взаимодействовать между компонентами без использования хранилища данных, такого как Vuex, и передавать события от родителя к дочернему компоненту.