Question

我创建了一个vuejs表独立组件，如：

<template>
    <header-with-many-specific-options/> *
    <generic-table/> *
</template>
<script>
    export default {
      data() {
        return {}
     }
  } 
etc.
</script>

*这些不是组件，而是我凌乱的模板结构的表示。

现在我想把我的表变成一个可重用的组件，为了做到这一点，我想从通用表中分离出非常具体的标题，所以我可以根据我的需要交换标题。例如，标题可以包含表格搜索，分页或按钮。

示例：

<table-component>
    <user-table-header> <- can swap out
</table-component>

所以是的，有没有办法实现这个目标？

Answer 1

使用slots。它们基本上是组件内容的占位符，可以在组件的标记内指定。

在表格组件定义中，您可以像这样指定标题内容的放置位置：

<template>
  <slot name="header"></slot>
  <generic-table></generic-table>
</template>

然后，无论您在何处使用组件标记，请将名称为slot的{{1}}属性作为值添加到要插入广告位的元素中：

"header"

vuejs 2组件设计

1 个答案: