Для того, чтобы в дочернем элементе прослушать событие @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, и передавать события от родителя к дочернему компоненту.