将类绑定到 Vue.js 2 中的插槽

新手上路,请多包涵

我正在尝试创建一个可重用的组件来迭代项目,过滤它们,并向插槽添加一些类(如果项目是偶数、奇数、第一个、最后一个等)

这是我的可重用组件:

 <template>
  <ul :class="classes">
    <slot
      v-for="(item, index) in filteredItems"
      :item="item"
      :class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </slot>
  </ul>
</template>

<script>
export default {
  props: ['items', 'classes'],
  data() {
    return {
      filteredItems: this.items.filter(item => item.active)
    };
  }
};
</script>

这是我使用它的方式:

 <component-list :classes="'some-class'" :items="category.products">
  <template scope="props">
    <product :product="props.item"></product>
  </template>
<component-list>

一切都按预期工作,但它不会向放在里面的元素添加类。

我做错什么了吗?在 Vue.js 2 中甚至在技术上可以做这样的事情吗?

感谢您的任何帮助或建议!

原文由 Matúš Čongrády 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 300
2 个回答

使用 vuejs2 插槽样式已被删除 如下所述:

通过命名插入的内容不再保留 slot 属性。使用包装器元素对其进行样式设置,或者对于高级用例,使用渲染函数以编程方式修改插入的内容。

所建议的最简单的事情是使用包装器元素,如下所示:

 <template>
  <ul :class="classes">
    <slot>
      <div
      v-for="(item, index) in filteredItems"
      :item="item"
      :class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </div>
    </slot>
  </ul>
</template>

原文由 Saurabh 发布,翻译遵循 CC BY-SA 4.0 许可协议

我有另一种方法可以达到你的目标,但不使用 render ,仍然使用 slot

可重用组件:

 <template>
  <ul :class="classes">
    <slot
      v-for="(item, index) in filteredItems"
      :item="item"
      :_class="{
        'first': index == 0,
        'odd': !(index % 2),
        'even': index % 2,
        'last': index == (filteredItems.length - 1)
      }"
    >
    </slot>
  </ul>
</template>

<script>
export default {
  props: ['items', 'classes'],
  data() {
    return {
      filteredItems: this.items.filter(item => item.active)
    };
  }
};
</script>

use _class to class keyword , so Vue.js will let _class as the common property.

然后在您的使用中:

 <component-list :classes="'some-class'" :items="category.products">
  <template scope="{ item, _class }">
    <product :product="item" :class="_class"></product>
  </template>
<component-list>

通过范围属性,您仍然可以从插槽中获取 _class

毕竟使用 render 可能更简洁。 :)

原文由 tomision 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题