将类绑定到 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>
使用_class
到class
关键字,所以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异步通信,计算属性,插值,自定义事件