如何从插槽内使用的组件访问插槽道具？

Question

所以我能找到的关于作用域插槽和传递道具的所有内容都不适用于我的具体情况：

我有以下组件顺序：

主页/列表/列表项

现在我决定用一个插槽替换 ListItem，因为我也在其他组件中使用了 List，但在那里我需要 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 版本。

Answer 1

scoped slot 中使用的任何组件都不能隐式访问 slot 属性。要使它们在组件内部可用，您必须将其作为道具明确传递给该组件...

<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>