避免在Vue模板中重复模式

Question

我有这个巨大的烦人组件，需要在父模板中重复多次，因为父模板使用的是 v-if。这是组件代码：

<SelectCard

  v-for="(channel, index) in category.visibleChannels"

  :key="index + '-' + channel.id"

  :channel="channel"

  :channel-selected="isSelected(channel.id)"

  :read-more-details="channelInfoDetails"

  @select="onAddChannel"

  @deselect="onRemoveChannel"

  @read-more-changed="setChannelInfoDetails"

/>

每次渲染模板时唯一变化的是我循环的数组......这是问题的简化版本：

<template>

<div

    ref="channels"

    class="channels"

  >

    <div v-if="showCategories">

      <div

        v-for="category in sliderCategories"

        :key="category.name"

      >

        <h3 v-text="category.name" />

        <div

          v-if="category.showAll"

          class="channel-list show-all"

          :class="channelListSize"

        >

          <ul>

            <SelectCard looping over category.contents  />

          </ul>

        </div>

        <ChannelSlider

          v-else

          :category="category"

          @visible-updated="setVisibleChannels"

        >

          <SelectCard looping over category.visibleChannels  />

        </ChannelSlider>

        <div class="show-all-link">

          <a

            :class="category.showAll?'arrow-up':'arrow-down'"

            class="link"

            @keyup.enter="toggleShowAll(category.name, !category.showAll)"

            @click="toggleShowAll(category.name, !category.showAll)"

            v-text="showAllText(category.showAll)"

          />

        </div>

      </div>

    </div>

    <div v-else>

      <div v-if="showNoSearchResult">

        <SomeComponent with some props/>

      </div>

      <div :class="channelListSize" class="channel-list">

        <ul>

          <SelectCard looping over updatedChannels  />

        </ul>

      </div>

    </div>

    <div

      ref="someref"

      class="someClass"

      :style="{top: channelInfoDetails.top + 'px', position: 'absolute'}"

    >

      <AnotherComponent with some props/>

    </div>

  </div>

</template>

所以我的模板变得巨大，因为 SelectCard 代码有很多道具。

有没有办法可以将 SelectCard 放入父代码中的方法中，这样我就可以使用要使用的数组或其他方法调用函数？还是有其他我不知道的解决方案？

Answer 1

我认为这里没有您想要的那么简单的解决方案。但也有一些可能性。v-bind您可以使用和的对象形式将其略微减小v-on。对于v-bind您需要引入一个方法来返回对象，因为您的道具依赖于channeland index，因此它们需要传递给该方法。这会减少一点，但它不是很好。属性的对象形式is也可能是一个选项。这可能会进一步挤压它，但会以清晰度为代价。另一种方法是引入另一个组件，然后为SelectCard. 例如：<div>&nbsp; <div v-if="conditionA">&nbsp; &nbsp; <div v-if="conditionA-A">&nbsp; &nbsp; &nbsp; <slot />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-else>&nbsp; &nbsp; &nbsp; <slot />&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; </div>&nbsp; <div v-else>&nbsp; &nbsp; <div v-if="conditionB-A">&nbsp; &nbsp; &nbsp; <slot />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-else>&nbsp; &nbsp; &nbsp; <slot />&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; </div></div>然后将SelectCardin 作为插槽内容传递，并使用计算属性使数组动态化。这种方法的一个问题是，您可能会发现自己必须在组件的各个层之间传递很多东西才能使其正常工作。另一种选择是将所有内容转换为render函数。您绝对可以使用函数来做您想做的事情，render但这会以不得不放弃使用模板为代价。这是否真的是一个问题将取决于模板其余部分的复杂性。

Answer 2

将 的所有逻辑v-if's放入一个计算属性中，该属性返回您想要传递为的正确数组。SelectCard 类似于以下内容的道具：<SelectCard :arr="arrayToRender"/>...computed: {&nbsp; &nbsp; &nbsp; &nbsp;arrayToRender(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (ConditionA){ return Array_A}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ....&nbsp; &nbsp; }