从槽内访问父组件的方法答案

【问题标题】：Access method of parent component from within slot从槽内访问父组件的方法
【发布时间】：2020-04-21 22:14:41
【问题描述】：

我正在尝试更新我不久前为 Vue 项目编写的表格组件。我试图让用户使用插槽定义列。但是，这些插槽需要来自父组件的数据，我现在通过插槽范围提供这些数据。不幸的是，这会导致很多不必要的代码，因为来自 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。对于每个标题，我需要传递排序属性并单击处理程序来调整排序。我相信对此有更好的解决方案:)。

【问题讨论】：

标签： vue.js html-table vue-component vue-router

【解决方案1】：

很遗憾，如果不更改设计，我认为您现在无能为力。

如果有更多的属性和更多的事件处理程序需要传递给一个槽，将它们分组以便使用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”插槽）。但这只是可能的，因为他们使用渲染函数并且没有模板......

【讨论】：