Блог

поэтому все, что я могу найти о слотах с областью действия и передающих реквизитах, не подходит для моей конкретной ситуации:

у меня есть следующий порядок компонентов:

Главная страница/Список/Список

теперь я решил заменить элемент ListItem на слот, и потому что я использую список и в другом компоненте, но там мне нужен элемент ListOptionsItem.

в моем домашнем компоненте я сделал это:

                <list 
                class="mapkeyList"
                :content="displayList"
                :filterbar="true"
                @handleSelection="addSelection"
                @delete="deleteElement"
                @editItem="editItem"
                header="Mapkeys"
                :key="mapkeyListKey"
           >
                <list-item>
                </list-item>
           </list>
 

в моем компоненте списка у меня есть это:

 <template>
 <div>
      <h2 v-if="header">{{header}}</h2>
      <div  class="listContainer"  v-if="showedContent.length > 0">
           
           <div v-for=" (item, index) in showedContent" :key="index">
                <slot 
                     :item="item"
                     :index="index"
                     :dragable="dragableItems"
                     @auswahl="auswahlHandle"
                     @deleteElement="deleteElement"
                     @editItem="editItem"
                     :dontShowButtons="dontShowButtons"
                     @dragStart="handleOverDragStart"
                     :dragItem="dragItem"
                     @position="$emit('emitPosition',item)"
                     :deaktivierbar="deaktivierbar"
                >
                </slot >
           </div>
 

наконец, ListItem и listOptionsItem должны получить доступ к этому реквизиту в слоте:

листИтем:

 <template>
 <div class= "flexSpaceBetween" @click="$emit('auswahl',item)">
      <div class="textFett">
           {{item[0]}}
      </div>
      <div>
           {{item[1]}}
      </div>
 </div>
 

я не хочу писать весь необходимый код в компоненте home, потому что listOptionsItem действительно нужно больше информации и больше места для написания кода.

моей целью было определить в компоненте Home, что я хочу, чтобы список использовал компонент ListItem, а в компоненте Options список должен использовать компонент listItemOptions. в будущем могут быть добавлены новые версии ListItem.

Любой компонент, используемый внутри слота с областью действия, не имеет неявного доступа к реквизитам слота. Чтобы сделать их доступными внутри компонента, вы должны явно передать их этому компоненту в качестве реквизитов…

 <list 
  class="mapkeyList"
  :content="displayList"
  :key="mapkeyListKey">
  <template v-slot:default="{ item }">
    <list-item :item="item">
    </list-item>
  </template>
</list>
 

Если у вас есть много реквизитов/событий, которые вы хотите передать, возможность как v-bind, так и v-on принимать объект в качестве аргумента очень полезна, потому что вы можете передавать все данные и обработчики событий одновременно:

 // List component
<template>
<div>
  <h2 v-if="header">{{header}}</h2>
  <div  class="listContainer"  v-if="showedContent.length > 0">
        
    <div v-for=" (item, index) in showedContent" :key="index">
       <slot :props="slotProps" :on="slotEventsHandlers"
       </slot >
    </div>
  </div>
</div>
</template>

<script>
export default {
  computed: {
    slotProps() {
      return {
        item: this.item,
        dragable: this.dragableItems
      }
    },
    slotEventsHandlers() {
      return {
        deleteElement: this.deleteElement,
        dragStart: this.handleOverDragStart
      }
    }
  }
}
</script>
 

И используйте его в родительских:

 <list 
  class="mapkeyList"
  :content="displayList"
  :key="mapkeyListKey">
  <template v-slot:default="{ props, on }">
    <list-item v-bind="props" v-on="on">
    </list-item>
  </template>
</list>