如何两次使用 <slot> 元素？

Question

我正在使用 Svelte，我想创建一个组件来允许我执行以下操作：

<CodeDisplay>
    <button class="btn">Button</button>
</CodeDisplay>

CodeDisplay.html 应该如下所示：

<slot></slot>
<code><slot></slot></code>

本质上，我想要的是一个组件，它将首先呈现我放置在组件中的 HTML 代码，然后我想显示代码本身。 （我正在构建一个文档系统。）

似乎你不能多次使用<slot></slot>，这是有道理的。

我将如何完成我在这里尝试的事情。对于文档中的每个示例，我真的想避免在我的代码中重复两次 HTML 代码。我只是觉得有一个组件会很好，一般来说，我可以传递一些 HTML，然后组件将呈现 HTML 并显示代码。

编辑： 我刚刚意识到我可以做这样的事情：

{{{html}}}
<pre><code>{{html}}</code></pre>

<script>
  export default {
    data() {
      return {
        html: '',
      }
    }
  };
</script>

并像这样显示它：

<CodeDisplay html='<button class="btn">Button</button>'/>

但是我遇到了一些错误（发生不一致）。

Answer 1

你见过叫<slot>s吗？

<slot name="slot-one"></slot> // Show rendered HTML
<slot name="slot-two"></slot> // Show HTML as string

---

当您使用反引号创建 HTML-sn-p 示例时，您可以在 slot-one 中呈现它并在 slot-two 中将其显示为（格式良好的多行）示例：

let mySnippet = `<div>
                    <div>
                        <span>Hello</span>
                    </div>
                </div`;

---

我不是 SvelteJS 专家，但你 you can test/check here with this example。