Vue 在 #document-fragment 中添加内容-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

Vue 在 #document-fragment 中添加内容

P粉916760429 2023-08-31 09:43:47

[Vue.js讨论组]

714

<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

全部回复(1)

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>