简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Vue 在 #document-fragment 中添加内容
P粉916760429
P粉916760429 2023-08-31 09:43:47
0
1
377
<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>
P粉916760429
P粉916760429

全部回复(1)
P粉594941301
P粉5949413012023-09-01 00:07:29 1 楼

我通过在模板标记上使用 ref 然后使用 render 函数解决了这个问题。

<template id="some-id" ref="someRef">
</template>
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)
  }
})

也许有更好的，但目前可行。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！