Как объединить два компонента во Vue?

Question

Хочу совместно использовать такие два компонента - vue-select-image и vue-agile. Как сделать так, чтобы каждый элемент vue-select-image оборачивался в один слайд vue-agile. Массив данных для vue-select-image берётся из json, сейчас при таком коде получается один слайд компонента vue-agile содержит все элементы vue-select-image.

<agile :options="sliderOptions">
  <div class="slide">
     <vue-select-image :dataImages="changeTheme" :useLabel=true @onselectimage="onSelectImage">
    </vue-select-image>
  </div>
</agile>

Answer 1

Можешь попробовать поиграться со слотами. В этой статье(вторая половина) рассматривают что-то подобное.

https://css-live.ru/articles/kak-sozdavat-vue-komponenty-slovno-profi.html

Пример кода из статьи

При комбинировании компонентов со слотами можно передавать данные компонентов в слоты с помощью slot-scope. Можно передавать пропсы вглубь из родительских компонентов в дочерние, не связывая их друг с другом.

<template>
  <Settings>
    <Layout slot-scope="{header, body, footer}">
      <Header slot="header" :header="header"></Header>
      <Body slot="body" :body="body"></Body>
      <Footer slot="footer" :footer="footer"></Footer>
    </Layout>
  </Settings>
</template>

БЛОГ НА HUSL

Как объединить два компонента во Vue?

Ответы (1 шт):