如何在 Svelte 中包含一个简单的组件？

Question

我正在使用 Sveltekit 建立一个涉及的网站。我有一个独立的“测试”组件。无需担心属性；没有值可以从 child 传递到 parent。

我的简单测试组件，ColorTest.svelte:

<script>
    export const fakeValue = "fake";
</script>

<h1>Color Test Patches</h1>
<div>
    <div class="box" id="a1">test</div>
    <div class="box" id="a2"></div>
    <div class="box" id="a3"></div>
    <div class="box" id="a4"></div>
    <div class="box" id="a5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
    <div class="box" id="b4"></div>
    <div class="box" id="b5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="c1"></div>
    <div class="box" id="c2"></div>
    <div class="box" id="c3"></div>
    <div class="box" id="c4"></div>
    <div class="box" id="c5"></div>
</div>
  
<style>
    .content {
        width: 100%;
        max-width: var(--column-width);
        margin: var(--column-margin-top) auto 0 auto;
    }

    .box{
        width: 18%;
        float: left;
        height: 50px;
    }

    #a1{background-color: var(--gray-100);}
    #a2{background-color: var(--gray-200);}
    #a3{background-color: var(--gray-300);}
    #a4{background-color: var(--gray-400);}
    #a5{background-color: var(--gray-500);}
    ... 
</style

我想在 parent.svelte:

内查看此测试

<script>
    import {ColorTest} from '$lib/ColorTest.svelte';
</script>

<div class="content">
    <h1>Parent Page</h1>

    <p>
        Placeholder for future content 
    </p>
    <ColorTest />
</div>

错误=<ColorTest> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules.

我正在考虑 'partials' 使用 Handlebar (hbs) 模板。显然，这是错误的心智模型。将 ColorTest 中的内容放入 parent 组件的正确方法是什么？很明显，在我弄清楚 CSS 颜色之后，我根本就不再需要 ColorTest 了。

基于 this example from Svelte for nested components, 这应该是一个完全微不足道的练习，在 ColorTest.svelte 内不需要 <script>。

Answer 1

哎呀。在详细查看 https://svelte.dev/examples#nested-components 之后，我的 parent.svelte 文件中出现了一个“错误”。

之前（有错误）：

<script>import {ColorTest} from '$lib/ColorTest.svelte';</script>

“修正”后：

<script>import ColorTest from '$lib/ColorTest.svelte';</script>

.js 文件组件需要括号，.svelte 文件组件不需要。

如何在 Svelte 中包含一个简单的组件？

How do I include a simple component in Svelte?

svelte-component

sveltekit