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) } })也許有更好的，但目前可行。