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