Vue 在 #document-fragment 中添加内容
P粉916760429
2023-08-31 09:43:47
<p>我将 vue3 与 nuxt3 结合使用，并希望在生成的 <code>#document-fragment</code> 中添加一个包含内容的模板标签。生成的 HTML 应如下所示：</p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#document-fragment
<div>
...
</div>
</template>
</body></pre>
<p>当我使用纯 html 时，效果很好。在 vue3 中，元素不在 <code>#document-fragment</code> 内部，而是在其下方，如下所示：</p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#document-fragment
<div>
...
</div>
</template>
</body></pre>
<p>我的vue3代码如下所示（类似于html代码）：</p>
<pre class="brush:php;toolbar:false;"><template>
<v-app>
<template id="some-id">
<div></div>
</template>
</v-app>
</template></pre>
<p>有什么方法可以将内容放入<code>#document-fragment</code>元素中吗？</p>
我通过在模板标记上使用 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) } })也许有更好的，但目前可行。