В Vue.js можно реализовать передачу клика из одного компонента в другие идентичные компоненты следующими способами:
1. Использование событийной передачи данных (Event Bus)
Этот подход основан на создании глобального событийного автобуса (event bus), который позволяет регистрировать события в одном компоненте и прослушивать их в других компонентах.
В главном файле приложения создадим экземпляр Vue и добавим в него пустой Vue-экземпляр в качестве событийного автобуса:
// main.js import Vue from 'vue' export const EventBus = new Vue()
Теперь можно использовать этот EventBus для передачи событий между компонентами, например:
// FirstComponent.vue
<template>
<button @click="emitClick">Click me</button>
</template>
<script>
import { EventBus } from '../main.js'
export default {
methods: {
emitClick() {
EventBus.$emit('component-clicked', someData)
}
}
}
</script>
// SecondComponent.vue
<template>
<div>
<h1>{{ clickedData }}</h1>
</div>
</template>
<script>
import { EventBus } from '../main.js'
export default {
data() {
return {
clickedData: ''
}
},
created() {
EventBus.$on('component-clicked', (data) => {
this.clickedData = data
})
}
}
</script>
В этом примере при клике на кнопку в компоненте FirstComponent будет отправлено событие component-clicked с некоторыми данными на EventBus. Компонент SecondComponent будет прослушивать это событие и обновлять свои данные в соответствии с переданными данными.
2. Использование родительского компонента в качестве промежуточного элемента
Этот подход основан на использовании родительского компонента в качестве "посредника" между компонентами, через который будет передаваться клик.
// ParentComponent.vue
<template>
<div>
<ChildComponent @child-clicked="handleChildClick"></ChildComponent>
<ChildComponent @child-clicked="handleChildClick"></ChildComponent>
</div>
</template>
<script>
export default {
methods: {
handleChildClick() {
// Обработка клика в родительском компоненте
}
}
}
</script>
// ChildComponent.vue
<template>
<button @click="$emit('child-clicked')">Click me</button>
</template>
В этом примере кнопка в компоненте ChildComponent будет генерировать событие child-clicked при клике, и родительский компонент ParentComponent будет прослушивать это событие и вызывать соответствующий метод обработки клика.
3. Использование модели данных
Если идентичные компоненты используют общую модель данных (например, массив объектов), то можно передать клик через модель данных.
// ParentComponent.vue
<template>
<div>
<ChildComponent v-for="item in items" :key="item.id" :item="item"></ChildComponent>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>
// ChildComponent.vue
<template>
<div @click="handleClick">{{ item.name }}</div>
</template>
<script>
export default {
props: ['item'],
methods: {
handleClick() {
// Обработка клика в дочернем компоненте
this.$emit('child-clicked', this.item)
}
}
}
</script>
В этом примере каждый дочерний компонент ChildComponent принимает объект item через свойство, и при клике на элемент передает его через событие child-clicked родительскому компоненту ParentComponent.