Как передать в props разное значение?

Question

[Olesya_v]

Есть компонент модалки во vuetify , на странице вызываю его с помощью $refs по событию @click и в уже в компоненте обрабатываю в методе modal_open. Задача в том, чтобы передавать динамические данные(прим. id материала) в модалку - желательно с помощью пропсов! Как передать в пропс idelement у компонента модалки
разное значение , тобиш при каждом вызове @click="$refs.modal_content.modal_open()" нужно в
пропс :idelement="data-id" подставить соответствующее значение data-id из кнопки?

<v-modal-content ref="modal_content"  :idelement="11" >
          <template v-slot:title>Lorem ipsum dolor sit amet</template>
          <template v-slot:content>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero reiciendis vitae maiores obcaecati blanditiis sunt voluptatem voluptas qui aspernatur sit, dolores, autem pariatur asperiores, quisquam delectus voluptates nobis mollitia a!
          </template>
</v-modal-content>

<a href="javascript:void(0);" data-id="12345" @click="$refs.modal_content.modal_open()"  class="d-flex align-items-center">
              some btn
              </a>

Иначе придется передавать $event и получать значения по getAttribute
@click="$refs.modal_content.modal_open($event)

Народ , пардон если что , если некорректный вопрос!

Answer 1

[Aetae]

Я бы мог тебе сказать как это сделать, но факт в том, что этого делать не надо.
На каждую сложную махинацию с элементами\компонентами ты должен заводить свой компонент\миксин, инкапсулирующий этот маленький кусочек функционала.
1. Компонент ~data-modal, который экспортирует метод modal_open внутри которого вызывает modal_open обёрнутого v-modal-content, одновременно проставляя idelement.
2. Компонент ~data-modal-control, который принимает пропс idelement и modal и внутри производит все махинации.
3. Возможно это стоит вообще объединить в один компонент, если конопка открытия всегда соответствует модалке.