Передача данных из компонента, содержащего содержимое слота, в этот компонент содержимого слота

Question

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

Я хочу передать данные из компонента, содержащего содержимое слота, в этот компонент содержимого слота.В частности, у меня есть данные, которые я хочу передать, называемые tier в Sponsors.vue.Я хочу передать эти данные SponsorCard.vue.

. В настоящий момент некоторые SponsorCard.vue компоненты отправляются в слот внутри компонента SponsorCardWrapper.vue в моем файле Sponsors.vue.Я хочу использовать tier внутри моего SponsorCard.vue компонента.(В частности, я хочу изменить ширину изображения в зависимости от уровня уровня спонсора, что я могу сделать при условии, что я отправлю tier реквизит).

Sponsors.vue

<template>
  <sponsor-card-wrapper tier="gold">
    <sponsor-card showSponsor="gamma"></sponsor-card>
  </sponsor-card-wrapper>
</template>

SponsorCardWrapper.vue

<template>
  <div class="sponsor-card-wrapper">
    <h2> {{ tier }} </h2>
    <layout-card-overflow :class="tier">
      <slot></slot>
    </layout-card-overflow>
  </div>
</template>

SponsorCard.vue

<template>
  <div class="sponsor">
    <h3> {{ sponsor.name }} </h3>
    <img :src="sponsor.image" :alt="sponsor.imageAltText" width="250px"/>
  </div>
</template>
<script>
  data() {
    computed: {
      sponsor: function() {
        return this.sponsors[this.showSponsor]
      }
    }
  }
</script>

Один из подходов состоит в том, чтобы пропустить хотя бы один из компонентов SponsorCard напрямую, <sponsor-card tier="gold" showSponsor="gamma"></sponsor-card>.Но я не хочу этого делать, потому что я хотел бы просто переместить компонент SponsorCard из одного SponsorCardWrapper в другой.Я также пытался создать слоты с заданной областью, но я не думаю, что я должен использовать их здесь.

Любая помощь будет оценена.Если у меня возникли проблемы с описанием или мне нужно улучшить терминологию, сообщите мне!

Answer 1

Я думаю, вам следует использовать слоты Scoped.

https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots https://medium.com/binarcode/understanding-scoped-slots-in-vue-js-db5315a42391

Примерно так:

Sponsors.vue

<template>
  <sponsor-card-wrapper>
    <sponsor-card
      slot-scope="{ tier }"
      :tier="tier"
    ></sponsor-card>
  </sponsor-card-wrapper>
</template>

SponsorCardWrapper.vue

<template>
  <div>
    <h2>title</h2>
    <layout-card-overflow>
      <slot
        v-bind:tier="tier"
      ></slot>
    </layout-card-overflow>
  </div>
</template>
<script>
export default {
  props: ['tier']
}
</script>

SponsorCard.vue

<template>
  <div>
    <h3>{{ tier }}</h3>
  </div>
</template>
<script>
export default {
  props: ['tier']
}
</script>

Это очень полезнодля отображения списков.

В вашем случае, почему бы вам просто не сделать:

<template>
  <sponsor-card-wrapper tier="gold">
    <sponsor-card showSponsor="gamma" tier="gold"></sponsor-card>
  </sponsor-card-wrapper>
</template>