Синхронный рендеринг компонентов vue в строку
Существует SFC с именем Bubble vue, который содержит простой макет.
Bubble.vue
<script setup lang = "ts">
</script>
<template>
<div hinted-name = "wrapper-bubble" class = "hinted-bubble-wrapper">
<div class = "hinted-bubble-frame" hinted-name = "frame"></div>
</div>
</template>
<style scoped lang = "stylus">
</style>
У меня также есть класс, который использует этот макет в качестве основы для логики.
export class BubbleStepView extends StepComponentView {
constructor() {
super(Bubble.toString);
}
}
Этот класс должен получать только строку HTML в качестве супераргумента.
Может ли кто-нибудь сказать мне, есть ли способ синхронно преобразовать компонент Vue в строку?
Приложение работает в браузере.
Я попытался использовать метод, описанный в https://v1.test-utils.vuejs.org/api/rendertostring.html, но у меня он не сработал, поскольку возвращает обещание.
да, для меня использование vue не кажется подходящим, однако мне нужно это понять, чтобы доказать своей команде. И возьмем другую технологию в будущем
Использование vue в качестве механизма шаблонов не оправдано, поскольку при этом отбрасываются почти все функциональные возможности фреймворка, но при этом сохраняются все накладные расходы; любой специализированный движок, такой как Nunjucks, будет намного лучше. Рассмотрите возможность обновления вопроса, указав полную информацию о вашем случае, включая реализацию и использование BubbleStepView, если вы заинтересованы в наилучшем возможном решении.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны визуализировать компонент:
<script setup>
import { getCurrentInstance, h, render as renderVue } from 'vue';
import Bubble from './Bubble.vue';
const self = getCurrentInstance();
const div = document.createElement('div');
const vNode = h(Bubble);
vNode.appContext = self.appContext;
renderVue(vNode, div);
const html = div.innerHTML;
div.remove();
</script>
<template>
<div>{{ html }}</div>
</template>
Вы даже можете смотреть HTML, не зная зависимостей:
<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import Bubble from './Bubble.vue';
const html = ref();
const $cont = ref();
const content = ref('type me');
onMounted(()=>{
html.value = $cont.value.innerHTML;
new MutationObserver(()=>{
html.value = $cont.value.innerHTML;
}).observe($cont.value, {childList:true, subtree:true, attributes:true, characterData:true});
});
</script>
<template>
<input v-model = "content">
<div ref = "$cont" key = "1" style = "visibility:hidden;position:absolute;width:0;height:0">
<bubble>{{ content }}</bubble>
</div>
<div>{{ html }}</div>
</template>
Это похоже на обходной путь, не так ли?
@VladislavUtkin Я все время использую его для рендеринга компонента в случайный элемент DOM на HTML-странице, для меня это выглядит нормально. Vue использует VDOM, поэтому в компоненте нет HTML, только функция рендеринга, поэтому визуализировать его и получить HTML кажется простым.
@VladislavUtkin vuejs.org/guide/extras/rendering-mechanism . Я думаю, если бы вы прочитали всю документацию по vue, вы бы вообще не задали свой вопрос...
Как можно скорее, однако я хотел бы увидеть другие ответы, если вы не возражаете.
@VladislavUtkin добавил несколько динамических примеров, просто чтобы показать, что можно сделать в некоторых случаях, когда необходим HTML визуализируемого компонента.
@AlexanderNenachev Да, это обходной путь. Правильным способом было бы делегировать эту часть представления приложению vue. Даже если вам нужно интегрировать его в приложение, отличное от Vue, что является обычным явлением, используйте элемент контейнера как есть и прикрепите его к dom вместо того, чтобы пытаться получить нереактивное представление HTML.
@EstusFlask я продемонстрировал это во втором фрагменте кода
@AlexanderNenachev Извините, я хотел отметить ОП в предыдущем комментарии. На этом этапе это становится хаком, который редко когда-либо понадобится, если только вам не придется вмешиваться в чужое приложение. Учитывая, что изменения в выводе DOM имеют значение, а не только в статическом выводе html, я ожидаю, что можно передать элемент $cont.value в том виде, в котором он используется, с небольшими изменениями или без изменений, внесенных в эту часть кода.
@EstusFlask Я бы сказал, что наблюдение за переменными, от которых зависит компонент, лучше, чем наблюдение за мутацией HTML, чтобы получить обновленный HTML, но MutationObserver помог в одном случае, когда я не хотел зависеть от переменных. Я нашел это очень крутым, агностиком. Да, это хак, но когда вам нужно быстро выполнить работу и закрыть задачу, это может быть надежной временной мерой.
@EstusFlask это был случай, когда я наблюдал за мутациями в HTML и вызывал плагин jQuery для обновления 🤷♂️😁
Это не обычное использование Vue. Подумайте о том, чтобы объяснить свой случай, это похоже на проблему XY, которую следует решать более традиционным способом.