vuejs 2 组件设计

Question

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

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

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

现在我想将我的 table 变成一个可重用的组件，为了做到这一点，我想将非常具体的 header 与通用的 table 分开，这样我就可以根据我的需要交换 headers。例如，header 可以有 table 搜索、分页或按钮。

示例：

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

是啊，有办法实现吗？

Answer 1

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

在您的 table 组件定义中，您将指定要放置 header 内容的位置，如下所示：

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

然后，在任何使用组件标签的地方，将名称为 "header" 的 slot 属性添加为要放入槽中的元素的值：

<table-component>
  <user-table-header slot="header"></user-table-header>
</table-component>

vuejs 2 组件设计

vuejs 2 component design

custom-component

vuejs2