Question

我已经在Vue 2中使用无渲染模式构建了一个分页组件，以将行为与呈现方式分开，并允许消费者编写自己的UI（https://adamwathan.me/renderless-components-in-vuejs/）。

RenderlessPagination.js：

...
render() {
  return this.$scopedSlots.default({
    setPage: this.setPage,  
    totalPages: this.totalPages,
    override: this.options.template // this is where the user can pass his own template 
    // etc
  })
}

Pagination.jsx

import template from './template' // default template in JSX syntax

 components: {RenderlessPagination},
 props:['options'],
 ...
 render(h) {
        return <renderless-pagination scopedSlots={
            {
                default: function (props) {
                    return props.override ? h(
                        props.override,
                        {
                            attrs: {props}
                        }
                    ) : template(props)(h) 
                }
            }
        }
        >

        </renderless-pagination>
    },

这允许用户将自己的模板传递到options.template中，从而覆盖默认模板：

MyPagination.vue

<template>
    <div class='VuePagination' :class='props.theme.wrapper'>
        <nav :class='props.theme.nav'>

            <ul v-show="props.showPagination" :class="props.theme.list">

                <li v-if="props.hasEdgeNav" :class='props.theme.firstPage' @click="props.setFirstPage">
                    <a v-bind="{...props.aProps,...props.firstPageProps}">{{props.texts.first}}</a>
                </li>

                <li v-if="props.hasChunksNav" :class='props.theme.prevChunk' @click="props.setPrevChunk">
                    <a v-bind="{...props.aProps, ...props.prevChunkProps}">{{props.texts.prevChunk}}</a>
                </li>

                <li :class="props.theme.prev" @click="props.setPrevPage">
                    <a v-bind="{...props.aProps,...props.prevProps}">{{props.texts.prevPage}}</a>
                </li>

                <li v-for="page in props.pages" :key="page" :class="props.pageClasses(page)"
                    v-on="props.pageEvents(page)">
                    <a v-bind="props.aProps" :class="props.theme.link">{{page}}</a>
                </li>

                <li :class="props.theme.next" @click="props.setNextPage">
                    <a v-bind="{...props.aProps, ...props.nextProps}">{{props.texts.nextPage}}</a>
                </li>

                <li v-if="props.hasChunksNav" :class='props.theme.nextChunk' @click="props.setNextChunk">
                    <a v-bind="{...props.aProps, ...props.nextChunkProps}">{{props.texts.nextChunk}}</a>
                </li>

                <li v-if="props.hasEdgeNav" :class="props.theme.lastPage" @click="props.setLastPage">
                    <a v-bind="{...props.aProps, ...props.lastPageProps}">{{props.texts.last}}</a>
                </li>

            </ul>

            <p v-show="props.hasRecords" :class='props.theme.count'>{{props.count}}</p>

        </nav>
    </div>

</template>

<script>
    export default {
        name: 'MyPagination',
        props: ['props']
    }
</script>

然后将其与插件一起使用：

import Pagination from 'vue-pagination'
import MyPagination from './MyPagination'

<pagination :options={template:MyPagination}/>

此代码在Vue 3上中断。有一次，scopedSlots已与插槽统一。其次，将h（CreateElement）变量作为全局依赖项导入。但是即使考虑了这些更改，我仍然无法找到可行的解决方案。

在Vue 3中重写此逻辑的最佳方法是什么？

Vue 3中的无渲染组件

0 个答案: