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

我认为您应该使用作用域插槽。

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>

将数据从包含插槽内容的组件传递到该插槽内容组件

1 个答案: