小编stu*_*-pj的帖子

在 Svelte 组件中，我尝试访问我在汇总配置文件中设置的对象。我的rollup.config.js文件如下所示：

import replace from '@rollup/plugin-replace';

...
export default {
...
    replace({
        foo: JSON.stringify({ bar: 'Hello' }),
    }),

...

在我的 Svelte 组件中，有一个简单的console.log(foo)工作原理：

但是当我尝试进入 foo 对象时console.log(foo.bar)，我得到foo is not Defined：

感谢 Vue.js Scoped Slots，我能够循环子组件中的所有可用插槽。现在，我尝试做的是仅渲染模板中特定位置上以特定字符串开头的插槽。

不幸的是，它不起作用。我可能忽略了一些事情。

父.vue：

<Child>
    <template #table--item.person_id="{ value }">
        <div class="text-caption">{{ value }}</div>
    </template>
</Child>

孩子.vue：

<template>
    <v-data-table>
        <template v-for="(_, slotName) of tableSlots" v-slot:[slotName]="scope">
            <slot :name="slotName" v-bind="scope"></slot>
        </template>
    </v-data-table>
</template>
<script>
    export default {
        computed: {
            tableSlots() {
                const prefix = 'table--';
                const raw = this.$scopedSlots;
                const filtered = Object.keys(raw)
                    .filter(key => key.startsWith(prefix))
                    .reduce((obj, key) => ({
                        ...obj,
                        [key.replace(prefix, "")]: raw[key]
                    }), {});
                return filtered;
            }
        }
    }
</script>

https://codesandbox.io/s/keen-bose-yi8x0