我有一个列表和一个 list_item 组件,我在我的应用程序中重复使用了很多。简化形式:
联系人列表.vue
<template lang="pug">
.table
.table-header.table-row
.table-col Contact
.table-col Info
.table-body
contact-list-item(v-for='contact in contacts',
:contact='contact',
@click='doSomething()')
</template>
联系人列表项目.vue
<template lang="pug">
.table-row(@click='emitClickEvent')
.table-col {{ contact.name }}
.table-col {{ contact.info }}
</template>
当我在特定组件内使用 contact_list 时,我希望能够发送一个插槽,该插槽将向 contact_list_item 组件添加一些新列。此插槽将使用在该 contact_list_item 组件内呈现的特定联系人的数据来生成新列。
我怎样才能做到这一点?使用插槽是最好的方法吗?
提前致谢。
原文由 felipeecst 发布,翻译遵循 CC BY-SA 4.0 许可协议
插槽是最好的方法,您将需要为
contact-list-item
组件使用作用域插槽。我对 pug 不是很熟悉,所以我将使用 HTML 作为示例。在
contact-list
,您将添加一个插槽。请注意,在这种情况下,联系人将作为属性传递。这样我们就可以利用 scoped slots 。然后向
contact-list-item
添加一个插槽。最后,在你的 Vue 模板中,使用 scoped 模板。
这是一个 工作示例。我不知道您的样式是什么,但请注意
id
列现在显示在contact-list-item
中。