如何在Vue中使用insertAdjacentHTML生成自定义标签/元素（组件）

Question

使用 insertAdjacentHTML 我可以制作 div、span 等 ..html 元素，但无法制作自定义标签，例如

<myComponent> </myComponent>

基本上 insertAdjacentHTML 可以生成 html 元素，这是我知道的，但自定义组件也由 html 标签组成。所以我认为必须有一种方法，使用 insertAdjacentHTML 或其他方式生成自定义元素。

我尝试了测试组件和基本的 html 元素。 我想要的不是生成 html 元素而是生成组件。

下面的代码是我尝试过的

“当有人单击按钮时，然后生成组件”是我的目的

<template>
<button @click="test"></button>
</template>

<script setup>
import multiSelectComp from '@/views/utils/multiSelectComp'
function test(){
let tag = document.getElementById('test3');
  tag.insertAdjacentHTML("afterend", `<multiselect 
        :arg=true>
    </multiselect>`)
}
</script>

Answer 1

您的代码会在单击时创建一个新组件。 Vue 可以通过多种方式做到这一点。

v-if 可用于仅在特定条件为真时渲染元素/组件

v-for 可以渲染给定数量的循环的元素。

我在下面的Vue Playground

中编写了两个指令渲染元素的基本示例

<template>
  <div class="wrapper">
    <button @click="renderOne">click renders single component</button>
    <multiSelectComp v-if="shouldRender"></multiSelectComp>

    <button @click="renderMultiple">multiple click renders multiple component</button>
    <multiSelectComp v-for="i in clicks" :key="i"></multiSelectComp>
  </div>
</template>

<script setup>
import multiSelectComp from './multiSelectComp.vue'
import { ref } from 'vue'

/* strategy 1: single component that is not rendered until condition is true */
const shouldRender = ref(false)
function renderOne(){
  shouldRender.value = true
}

/* strategy 2: render number of components equal to number of clicks */
const clicks = ref(0)
function renderMultiple() {
  clicks.value++
}
</script>