Vue在#document-fragment内添加内容

qeeaahzv 于 2023-02-05 发布在 Vue.js

关注(0)|答案(1)|浏览(286)

我正在使用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元素里面？

vue.js

来源：https://stackoverflow.com/questions/75310932/vue-add-content-inside-document-fragment

1条答案

按热度按时间

xuo3flqw1#

我通过在模板标记上使用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）回复(0）举报 2023-02-05

我来回答

Vue在#document-fragment内添加内容

1条答案

相关问题

热门标签

最新问答