как передать компоненты как реквизиты в vue js и как правильно их использовать?

Question

Здравствуйте. У меня есть дочерний компонент, основной функцией которого является фильтрация и отображение списка элементов. Этот дочерний компонент должен использоваться в нескольких родительских компонентах (представлениях), и в зависимости от родительского компонента дочерний компонент должен отобразить другой дочерний компонент (большой дочерний).

Родительский компонент

    <template>
     <main>
    //Child Component
    <list-component
      name="my items"
      //List of Items I need to render
      :list="items.list"
    >
      //Slot Passing my grandchild component
      <template slot="child-component">
        <component :is="child_component" :items="item"></component>
      </template>
    </list-component>
  </main>
</template> 

    <script>
    import ListComponent from '.ListComponent';
    import ItemComponent from '.ItemComponent.vue';

export default {
  components: {
    ListComponent,
    ItemComponent
  },

  data() {
    return {
      child_component: 'ItemComponent'
    };
  },
}
</script>

ListComponent. vue (дочерний компонент)

<template>
  <main>
    <v-row class="ma-0">
      <v-col v-for="(item, index) in list" :key="index" class="pa-0">
        // I would like render my grandchild component here. 
        <slot name="child-component"></slot>
      </v-col>
    </v-row>
  </main>
</template>

<script>

export default {
  props: {
    name: {
      type: String,
      required: true
    },

    list: {
      type: Array,
      required: true
    }
  }
};
</script>

ItemComponent. vue (большой дочерний элемент)

<template>
  <div>
    <v-img
      src="item.image"
    ></v-img>

    <v-row>
      <span>{{
        item.name
      }}</span>
    </v-row>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

Так что в основном мне нужно иметь возможность передавать ItemComponent. vue (внук) из View (дедушка) в ListComponent представления. vue (child), чтобы дочерний компонент мог l oop через элементы, переданные от родителя, и использовать внука для предоставления информации.

Кроме того, где я могу объявить реквизиты для внука?

Answer 1

Мне удалось найти решение, в конце концов я оставлю это для тех, кто в нем нуждается.

В основном в дочернем компоненте нам нужно предоставить доступ к атрибуту родительскому элементу через слот, связав item вроде:

<slot name="child-component" :item="item"></slot>

и на родительском объекте мы можем получить к нему доступ, привязав слот и присвоив объекту имя, в этом случае я выбрал child и заметил, что на компоненте мы можем получить доступ к элементу, объявив child .item

  <template v-slot:child-component="child">
    <component :is="child_component" :itinerary="child.item"></component>
  </template>