Vue -我如何提取模板到mixin?

Question

我有一个mixin:

MixinElTable.vue

export default {
components: { Pagination },
data: () => ({
listData: [],
listLoading: true,
listQuery: {
page: 1,
limit: 10
},
...
}),
computed: {
filteredData() {
return this.listData.filter(data => {
return this.searchData === '' ||
data[this.searchKey].toLowerCase().includes(this.searchData.toLowerCase())
})
}
...
}
...
}

然后，我在几个视图中使用它:

ProjectList.vue

export default {
name: 'ProjectList',
mixins: [MixinElTable],
...

IssueList.vue

export default {
name: 'IssueList',
mixins: [MixinElTable],
...

在<script>块中，我可以使用mixin中的所有内容来避免编写重复的代码。但是，在<template>块中，我需要复制并粘贴每个视图的代码，例如:

<el-table v-loading="listLoading" :data="pagedData" :element-loading-text="$t('Loading')" border fit
highlight-current-row height="100%" :cell-style="{height: rowHeight + 'px'}">
...(Something specific to each view like ProjectList or IssueList etc.)
</el-table>
<pagination
:total="filteredData.length"
:page="listQuery.page"
:limit="listQuery.limit"
:page-sizes="[listQuery.limit]"
:layout="'total, prev, pager, next'"
@pagination="onPagination"
/>

由于listQuery或filteredData()等数据存储在视图组件中，我只能使用mixins而不是组件。但是如果不使用组件，我不知道如何避免重复的模板代码。

我如何包装模板代码类似于组件像<el-table-paged>?顺便说一下，我使用node.js版本值，如果它重要的话。

Answer 1

Mixins不是模板自带的。假设你将两个带有模板的mixins附加到一个组件上。如何将mixins的模板合并?

我认为这种情况更需要使用带有<slot />的组件。您仍然可以做您想做的事情，只需将属性传递给包装器组件。如果您有任何属性需要传递给槽式组件，您可以将变量传递给槽式作用域。因此，您将拥有以下包装器组件而不是mixin:

<template>
<div>
<el-table v-bind="$attrs">
<slot v-bind:filteredData="filteredData" />
</el-table>
<pagination ... />
</div>
</template>
<script>
export default {
name: 'WrapperElTable',
props: { ... your required properties ... },
computed: {
filteredData() { return stuff; }
},
...
};
</script>

在你的两个独立组件中，你可以这样使用这个组件:

<template>
<WrapperElTable :raw-data="rawData" :list-query="listQuery">
<template v-slot:default="{ filteredData }">
...do stuff with filteredData, specific to ProjectList
</template>
</WrapperElTable>
</template>
<script>
export default {
name: 'ProjectList',
components: {WrapperElTable},
...
};
</script>

任何rawData,listQuery等都可以简单地作为道具传递给你的基本组件。