vuejs3 - 在 vue3 组合 api 中动态添加包装器元素

Question

考虑下面的一个组件，它接受tag作为道具。

<template>
    <input v-model="model"/>
</template>
<script>
export default { 
    name: "InputComponent",
    props: {
        tag: {
            type: String,
            required: false,
            default: null,
        }
    }
}
</script>

我想将道具div作为tag值传递，应该在下面返回 dom。

<div>
   <input v-model="model"/>
</div>

使用组合 api 的解决方案是有优势的。

Answer 1

<template>
    <component :is="tag">
        <input v-model="model"/>
    </component>
</template>
<script>
    export default { 
        name: "InputComponent",
        props: {
            tag: {
                type: String,
                required: false,
                default: null,
            }
        }
    }
</script>

应该管用。