Question

我正在尝试更新我之前为Vue项目编写的表组件。我试图让用户使用插槽定义列。但是，这些插槽需要来自父组件的数据，而我现在是通过slot-scope提供的。不幸的是，这会导致很多不必要的代码，因为slot-scope的属性只是通过props传递给子组件。我一直认为可以通过更好，更好的方式来实现这一目标。您对以下代码示例有任何建议吗？

VueTable.vue

<table>
    <thead>
        <tr>
            <slot name="header" :sorting="sorting" :click-handler="clickHeader"></slot>
        </tr>
    </thead>
    <tbody>
        <tr v-for="let row of rows">
            <slot name="row" :row="row"></slot>
        </tr>
    </tbody>
</table>

export default {
    name: 'vue-table',

    methods: {
        .. 

        clickHeader(..) {
            ..
        },

        ..
    }
}

Example.vue

<vue-table>
    <template slot="header" slot-scope="{sorting, clickHandler}">
        <vue-table-header :sorting="sorting" @click="clickHandler" label="Naam" identifier="title"></vue-table-header>
        <vue-table-header :sorting="sorting" @click="clickHandler" label="Einddatum" identifier="end_date"></vue-table-header>
    </template>

    <template slot="row" slot-scope="{row}">
        <vue-table-column :row="row" property="title"></vue-table-column>
        <vue-table-column :row="row" property="description" type="custom">
            This is a custom table column, which uses multiple properties: {{ row.id }} has a description of: {{ row.description }}
        </vue-table-column>
        <vue-table-column :row="row" property="end_date" type="date"></vue-table-column>
    </template>
</vue-table>

vue-table-header需要排序对象和clickHandler来显示正在主动排序的列并对其进行更新。

vue-table-column有权访问row属性，以便能够访问除定义为“属性”的属性以外的其他属性。

上面示例中的问题是，对于每一列，我需要再次传递row。对于每个标题，我需要传递排序属性并单击处理程序以调整排序。我相信有一个更好的解决方案：）。

Answer 1

不幸的是，我认为如果不更改设计，您现在可以做很多事情。

如果需要将更多的属性和事件处理程序传递给插槽，则对em进行分组可能很有用，以便可以使用props / events对象语法将它们传递给组件

在表格组件中：

<slot name="header" :props="{ sorting: sorting, showGroupBy: showGroupBy } :on="{ sort: sortHandler, groupBy: groupByHandler }"></slot>

在模板中（使用表格组件）：

<v-table>
  <template v-slot:header="{ props, on }">
    <v-header v-bind="props" v-on="on" />
  </template>
</v-table>

如果v-header组件期望道具sorting和showGroupBy并且可以发出事件sort和groupBy，这将起作用。

通常，表并不容易。我认为Vuetify的v-data-table是设计的良好灵感。他们做了令人惊奇的事情-提供大多数情况下足够的默认行为，同时提供一种在列/行级别进行自定义的方法（例如，通过“ item.item_name”插槽）。但这是唯一可能的，因为它们使用渲染功能而不使用模板。...

从插槽中访问父组件的方法

1 个答案: