从槽内访问父组件的方法

Posted 2023-02-23

【中文标题】从槽内访问父组件的方法

【英文标题】：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。对于每个标题，我需要传递排序属性并单击处理程序来调整排序。我相信对此有更好的解决方案:)。

【参考方案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”插槽）。但这只是可能的，因为他们使用渲染函数并且没有模板......