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

Posted

技术标签:

【中文标题】将类绑定到 Vue.js 2 中的插槽【英文标题】:Bind class to a slot in Vue.js 2 【发布时间】:2017-06-26 03:12:47 【问题描述】:

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

这是我的可重用组件:

<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 中甚至在技术上可以做这样的事情吗?

感谢您的帮助或建议!

【问题讨论】:

【参考方案1】:

如here 所述,插槽中的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>

【讨论】:

您能否提供一个简单的示例或详细说明modify the inserted content programmatically using render functions 部分?谢谢! @MatúšČongrády here is more info about render functions【参考方案2】:

我有另一种方法可以让你瞄准,但不使用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>

使用_classclass 关键字,所以Vue.js 将让_class 作为公共属性。

那么在你的使用中:

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

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

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

【讨论】:

【参考方案3】:

在你的子组件中不要使用 slot 标签,只需将 slot 数据绑定到普通元素即可。

例如,假设我有一个名为 modal 的组件。在我的父母中,我有这个:

<modal>
    <h1 slot="title">My modal title</h1>
</modal>

因此,使用普通插槽时,我的子组件将具有以下标记:

<slot name="title" class="this-class-will-not-get-added"></slot>

但不会添加该类。

所以我们可以这样做:

<h1 class="this-class-will-get-added">this.$slots.title['0'].children['0'].text</h1>

【讨论】:

以上是关于将类绑定到 Vue.js 2 中的插槽的主要内容,如果未能解决你的问题,请参考以下文章

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

VueVue入门--双向绑定,Vue的组件,Axios异步通信,计算属性,插值,自定义事件

将类绑定到 TextField

如何绑定到 Vue JS 中的属性?

html Vue将类绑定到v-for循环中的元素

Vue绑定到动态插槽元素?