Vue 在#document-fragment 里面添加内容

Question

我将 vue3 与 nuxt3 一起使用，并希望在生成的#document-fragment中添加一个包含内容的模板标签。 生成的 HTML 应如下所示：

<body>
  <template id="some-id">
    #document-fragment
      <div>
        ...
      </div>
  </template>
</body>

当我使用普通 html 时，效果很好。 使用 vue3，元素不在#document-fragment内，而是在它下面，如下所示：

<body>
  <template id="some-id">
    #document-fragment
    <div>
      ...
    </div>
  </template>
</body>

我的 vue3 代码如下所示（类似于 html 代码）：

<template>
  <v-app>
    <template id="some-id">
      <div></div>
    </template>
  </v-app>
</template>

有什么办法可以将内容放入#document-fragment元素中吗？

Answer 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)
  }
})

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

Vue 在#document-fragment 里面添加内容

问题描述

1 个解决方案

解决方案1
0 2023-02-02 08:39:30

Vue 在#document-fragment 里面添加内容

问题描述

1 个解决方案

解决方案1 0 2023-02-02 08:39:30

解决方案1
0 2023-02-02 08:39:30