Как при клике в компоненте передать клик в другие идентичные компоненты?

Question

[iokan]

Есть множество выпадающих блоков-компонентов (около 100), контент которых открываются и скрывается по клику на кнопку, путем изменения флага isShow. Как при клике в одном компоненте скрыть контент у всех остальных?

<div class="dropdowns">
      <Dropdown>
        <template v-slot:title>Block 1</template>
        <p>Text 1</p>
      </Dropdown>
      <Dropdown>
        <template v-slot:title>Block 2</template>
        <p>Text 2</p>
      </Dropdown>
      <Dropdown>
        <template v-slot:title>Block 3</template>
        <p>Text 3</p>
      </Dropdown>
      ...
</div>

Сам компонент

<template>
  <div class="dropdown" :class="{'dropdown_open': isShow}">
    <div class="dropdown__title">
      <div>
        <slot name="title">
          Заголовок
        </slot>
      </div>
      <div class="dropdown__btn" @click="isShow = !isShow">
        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L1 9" stroke="#131751" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
    <div class="dropdown__content" v-if="isShow">
      <slot>
        Нет контента
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dropdown',
  data: () => {
    return {
      isShow: false
    }
  },
  props: {
    title: {
      type: String,
      default () {
        return 'Заголовок'
      }
    }
  }
}
</script>

Answer 1

[Владимир Коротенко]

отправляете событие верхнему компоненту, а он уж пусть спускает вниз или пропсы устанавливает