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

Question

Consider a component below, which accepts tag as props.

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

I want passing the props div as tag value should return dom below.

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

Solution with composition api is advantange.

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>

should work.