Vue fügt Inhalte im #document-fragment hinzu
P粉916760429
2023-08-31 09:43:47
<p>Ich verwende vue3 mit nuxt3 und möchte ein Vorlagen-Tag mit Inhalt im generierten <code>#document-fragment</code> hinzufügen. Der generierte HTML-Code sollte wie folgt aussehen: </p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#Dokumentfragment
<div>
...
</div>
</template>
</body></pre>
<p>Wenn ich einfaches HTML verwende, funktioniert es großartig. In vue3 befindet sich das Element nicht innerhalb von <code>#document-fragment</code>, sondern darunter: </p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#Dokumentfragment
<div>
...
</div>
</template>
</body></pre>
<p>Mein Vue3-Code sieht so aus (ähnlich dem HTML-Code): </p>
<pre class="brush:php;toolbar:false;"><template>
<v-app>
<template id="some-id">
<div></div>
</template>
</v-app>
</template></pre>
<p>Gibt es eine Möglichkeit, Inhalte in das Element <code>#document-fragment</code> einzufügen? </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我通过在模板标记上使用 ref 然后使用
render函数解决了这个问题。const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render('div', someRef.value.content) } })如果你想插入一个组件，你可以像这样使用它：
const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render(h(SomeComponent, { someProp: someValue }), someRef.value.content) } })也许有更好的，但目前可行。