javascript - 如何使用两次 元素？

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> 的吗？是吗？

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

---

当您创建带有反引号的 HTML 片段示例时，您可以在 slot-one 中呈现它并将其显示为(格式良好的多行)示例 slot-two :

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

---

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