Как заставить компонент использовать v-for иметь динамические слоты - PullRequest
Новая
       35

Как заставить компонент использовать v-for иметь динамические слоты

0 голосов
/ 27 июня 2019

У меня есть дочерний компонент, который использует v-for.Я хочу, чтобы родительский элемент пропустил слот или что-то похожее на то, как он хочет, чтобы каждый элемент отображался в v-for.Однако проблема в том, что у родителя нет доступа к каждому отдельному элементу в v-for, поскольку он отображается.

Некоторые вещи, которые я пробовал, - пропуск слота с определенными ключами.например, 

<child-comp :items="items">
    <div v-text="item.text" slot="body"/>
</child-comp>

Базовый код может выглядеть так, как я пытаюсь (хотя он не работает)

Родительский компонент будет выглядеть примерно так: 

<template>
   <child-comp :items="items>
     <div v-text="item.text"
    </child-comp>
</template>
items = [{ text: 'hello'}]

Ребенок будет выглядеть примерно так 

<template>
  <div>
     <span v-for="item in items">
       <slot></slot>
     </span>
  </div>
</template>

Обратите внимание, что это должно быть динамически, потому что один элемент может делать v-текст, другой может делать что-то вроде добавления большего количества html, например изображения, а другой может делать что-то полностьюотличается.

1 Ответ

0 голосов
/ 27 июня 2019

Я полагаю, что вы ищете слоты с ограничениями.

https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Обратите внимание, что предпочтительный синтаксис для использования слотов с ограничениями изменился в Vue 2.6.0, поэтому точный способ написания этогобудет зависеть от того, какую версию вы используете.

Ваш ребенок передаст item в слот, например: 

<template>
  <div>
    <span v-for="item in items">
      <slot :item="item"></slot>
    </span>
  </div>
</template>

Родитель будет выглядеть так для Vue 2.6.0 +: 

<template>
  <child-comp :items="items">
    <template v-slot:default="slotProps">
      <!-- The parent can put whatever it needs here -->
      {{ slotProps.item }}
    </template>
  </template>
  </child-comp>
</template>

Любые реквизиты, переданные ребенку в слот, будут включены в slotProps.Нет необходимости называть его slotProps, и на практике он обычно деструктурирован (см. Документацию).

Для Vue 2.5 вместо этого вы бы использовали slot-scope: 

<template>
  <child-comp :items="items">
    <template slot-scope="slotProps">
      <!-- The parent can put whatever it needs here -->
      {{ slotProps.item }}
    </template>
  </template>
  </child-comp>
</template>

До Vue 2.5.0 slot-scope назывался scope.

...