【问题标题】:Vue slot scopes within for loopfor循环中的Vue插槽范围
【发布时间】:2019-07-27 00:56:15
【问题描述】:

我在v-for 循环中有多个插槽,如下所示。除了为每个插槽绑定我的数据之外,有没有办法可以将此数据绑定到 v-for 循环中的所有插槽?

<div class="vehicle-listing" v-for="(vehicle, index) in vehicles" :key="vehicle.id ? vehicle.id : 'undefined'+index">

    <div class="vehicle-listing__image">
        <slot name="listing-image" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__title">
        <slot name="listing-title" v-bind:vehicle="vehicle">
            <slot name="listing-title__header" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__subtitle" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__price" v-bind:vehicle="vehicle">
                Default content
            </slot>
            <slot name="listing-title__favourites" v-bind:vehicle="vehicle">
               Default content
            </slot>
        </slot>
    </div>

    <div class="vehicle-listing__summary">
        <slot name="listing-summary" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__finance">
        <slot name="listing-finance" v-bind:vehicle="vehicle">
            Default content
        </slot>
    </div>

    <div class="vehicle-listing__info">
        <slot name="listing-info" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

    <div class="vehicle-listing__location">
        <slot name="listing-location" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

    <div class="vehicle-listing__button-block">
        <slot name="listing-cta" v-bind:vehicle="vehicle">
           Default content
        </slot>
    </div>

</div>

【问题讨论】:

    标签: javascript vue.js vuejs2


    【解决方案1】:

    不,没有办法一次绑定到所有插槽。您需要为每个插槽单独提供绑定。

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

    【讨论】:

      猜你喜欢
      • 2022-12-16
      • 1970-01-01
      • 2013-07-15
      • 2023-03-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-24
      • 2011-09-07
      相关资源
      最近更新 更多