Слоты Vue с переменным HTML, переданным в - PullRequest
Новая
       9

Слоты Vue с переменным HTML, переданным в

0 голосов
/ 01 июля 2019

У меня есть строка, содержащая некоторую разметку HTML.

Я хотел бы передать это в слот компонента.

Этот компонент используется в других местах с регулярной HTML-разметкой между открывающим и закрывающим тегами и работает, как ожидается.

Проблема заключается в том, что выходные данные синтаксиса усов выходят за пределы HTML, {{myFormattedText}} становится буквально Some line of <span>text with formatting</span> that is passed in from somewhere else, а это не то, что нам нужно.

Передача его в атрибуте v-html="myFormattedText" компонента заменяет все содержимое тегов компонента строкой переменной.

Есть ли способ сделать это?Я хотел бы повторно использовать этот компонент из соображений визуальной согласованности, но контент, который мы получаем для него, несопоставим и широко варьируется в зависимости от вида или источника.

Тестовая строка: 

myFormattedText = "Some line of <span>text with formatting</span> that is passed in from somewhere else";

Компонент: 

<template>
    <div class="doing-a-thing">
        <h2>Some text</h2>
        <div class="thing">Random stuff</div>
        <slot></slot>
    </div>
</template>

Попытки: 

<mycomponent>{{myFormattedText}}</mycomponent>
<mycomponent v-html="myFormattedText"></mycomponent>

1 Ответ

0 голосов
/ 01 июля 2019

Просто поместите визуализацию v-html на элемент внутри тегов компонента, и он будет правильно отображен и передан. 

<mycomponent><div v-html="myFormattedText"></div></mycomponent>

Опять же, через несколько мгновений после публикации, оно поражает меня, как молния ...

...