Как использовать элемент ‹slot› дважды?

Я использую 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>'/>

Но я получаю некоторые ошибки с этим (которые происходят непоследовательно).


javascript svelte slot
person Justin    schedule 21.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы видели имя <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`;

Я не эксперт SvelteJS, но вы можете протестировать / проверить здесь с этим примером.

person Jeffrey Roosendaal    schedule 21.03.2018
comment
Я прочитал этот раздел в документации. Я не верю, что это дает то, что я пытаюсь сделать. - person Justin; 22.03.2018
comment
Итак, я увидел вашу правку, и это подводит меня к последней идее о том, как я могу выполнить то, что хочу. В принципе, у вас есть файл JSON, в котором хранится разметка HTML с использованием строк шаблона с обратными кавычками, как вы сказали. Затем я могу перебрать JSON в своем коде шаблона и передать привязку вместо ‹slot› ‹/slot›. Таким образом, мой компонент CodeDisplay может выглядеть примерно так: {{html}} ‹code› {{html}} ‹/code› - person Justin; 22.03.2018
comment
Опять же, я должен повторить, что я хотел бы написать HTML только один раз, и тогда компонент будет отвечать за рендеринг HTML и самого кода HTML. - person Justin; 22.03.2018
comment
Всегда неплохо хранить данные в JSON и использовать компоненты для отображения блока контента (чтобы ваш код был чистым и читаемым). Я сам не использовал SvelteJS, я просто знал о слотах имен, так как многие Js-фреймворки имеют их (или что-то подобное). Я больше ничем не могу вам помочь, но надеюсь, что указал вам правильное направление с помощью названных слотов и HTML-кода с обратной кавычкой. - person Jeffrey Roosendaal; 22.03.2018
comment
Я отредактировал свой вопрос, включив в него альтернативный способ выполнения того, что я хочу. Разница между двумя фигурными скобками и тремя. ({{ против {{{) - person Justin; 22.03.2018
comment
Было бы лучше использовать метод слота, потому что размещение HTML в качестве привязки выглядит не очень хорошо. - person Justin; 22.03.2018