所以我所能找到的關于范圍槽和傳遞道具的一切都不適合我的具體情況：
我有以下組件順序：
主頁/串列/串列
現在我決定用槽來取代 ListItem，因為我在另一個組件中也使用 List，但在那里我需要 ListOptionsItem。
在我的主組件中，我這樣做了：
在我的主組件中，我這樣做了。
<list
class="mapkeyList"
:content="displayList"
:filterbar="true"
@handleSelection="addSelection"
@delete="洗掉元素"
@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">
<槽
:item="專案"
:index="索引"
:dragable="dragableItems"
@auswahl="auswahlHandle"
@deleteElement="洗掉元素"
@editItem="編輯項"
:dontShowButtons="dontShowButtons"
@dragStart="handleOverDragStart"
:dragItem="dragItem"
@position="$emit('emitPosition',item)"
:deaktivierbar="deaktivierbar"
>
</slot >
</div>
最后，listItem和listOptionsItem需要訪問槽中的這個道具：
listItem:<template>
<div class= "flexSpaceBetween" @click="$emit('auswahl',item)">
<div class="textFett">
{{item[0]}}
</div>
<div>
{{item[1]}}.
</div>
</div>
我不想在主頁組件中撰寫所有必要的代碼，因為listOptionsItem確實需要更多的資訊和更多的空間來撰寫代碼。
我的目標是在主頁組件中定義我希望串列使用listItem組件，而在選項組件中，串列應該使用listItemOptions組件。
uj5u.com熱心網友回復：
任何在scoped slot內使用的組件都不能隱式訪問槽的道具。要使它們在組件內部可用，你必須把它作為道具明確地傳遞給該組件......
<list。
class="mapkeyList"
:content="displayList"/span>
:key="mapkeyListKey">/span>
<template v-slot:default="{ item }"/span>>
<list-item :item="item">/span>
</list-item>/span>
</template>/span>
</list>/span>
如果你有很多想要傳遞的道具/事件，那么v-bind和v-on以一個物件作為引數的能力非常有用，因為你可以同時傳遞所有資料和事件處理程式：
// List component
<模板>
<div>
<h2 v-if="header"/span>> {{header}}</h2>
<div class="listContainer" v-if=" showedContent. length > 0">
<div v-for=" (item, index) in showedContent"/span> 。 key="index"/span>>
<slot 。 props="slotProps" :on="slotEventsHandlers"
</slot >
</div>/span>
</div>/span>
</div>/span>
</template>/span>
<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"/span>
:key="mapkeyListKey">/span>
<template v-slot:default="{ props, on }"/span>>
< list-item v-bind="props" v-on="on">
</list-item>/span>
</template>/span>
</list>/span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/310010.html
標籤：