如何使用<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>'/>

但我在使用它时遇到了一些错误（不一致的问题）。

- Justin

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专家，但是你可以通过这个例子来测试/检查。

- Jeffrey Roosendaal

---

我确实在文档中阅读了那一部分。但我不认为它能够完成我想要做的事情。 - Justin

所以我看到了你的编辑，这启发了我最新的想法，关于如何实现我想要的功能。基本上，使用像你说的那样带有反引号的模板字符串，将HTML标记存储在JSON文件中。 然后，在我的模板代码中循环遍历JSON，并传递绑定而不是<slot></slot>。这样，我的CodeDisplay组件看起来更像：{{html}}<code>{{html}}</code> - Justin

我想再强调一遍，我的要求是只需编写一次HTML代码，组件将负责呈现HTML和HTML代码本身。 - Justin

将数据存储在JSON中并使用组件显示内容是一个好主意（可以使您的代码整洁易读）。我自己并没有真正使用过SvelteJS，只是知道有名字插槽，因为很多Js框架都有这些（或类似的东西）。我无法再帮助您更多，但我希望通过命名插槽和反引号HTML指向了正确的方向。 - Jeffrey Roosendaal

我已编辑我的问题，包括一种替代方式来实现我想要的。两个花括号和三个花括号之间的区别 ({{ vs {{{)。 - Justin

不过最好使用slot方法，因为将HTML作为绑定不太好看。 - Justin