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>'/>

但是我遇到了一些错误（这种情况不一致）。

score 2 · Accepted Answer

你见过叫<slot>s吗？

<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`;

1 回答 1