javascript - 避免在 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 代码有很多 Prop 。

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

Answer 1

我认为这里没有一个像您希望的那样简单的解决方案。但还是有一些可能性。

您可以使用v-bind 和v-on 的对象形式稍微减少它。对于 v-bind 你需要引入一个方法来返回对象，因为你的 props 依赖于 channel 和 index，所以它们会需要传递给方法。这会减少一点，但效果并不好。 is 属性的对象形式也可能是一个选项。这可能会进一步压缩它，但会牺牲清晰度。

另一种方法是引入另一个组件，然后使用 SelectCard 的插槽。例如:

<div>
  <div v-if="conditionA">
    <div v-if="conditionA-A">
      <slot />
    </div>
    <div v-else>
      <slot />
    </div>  
  </div>
  <div v-else>
    <div v-if="conditionB-A">
      <slot />
    </div>
    <div v-else>
      <slot />
    </div>  
  </div>
</div>

然后，您可以将 SelectCard 作为槽内容传递，并使用计算属性使数组动态化。

这种方法的一个问题是，您可能会发现自己必须在组件的各个层之间传递大量内容才能使其正常工作。

另一个选项是将所有内容转换为 render 函数。您绝对可以使用 render 函数来完成您想要做的事情，但这将以放弃使用模板为代价。这是否真的是一个问题取决于模板其余部分的复杂性。