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

Posted 2023-03-16

【中文标题】在 vue3 组合 api 中动态添加包装器元素

【英文标题】：Dynamically add wrapper element in vue3 composition api

【发布时间】：2022-01-21 23:13:36

【问题描述】：

考虑下面的一个组件，它接受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>

有composition api的解决方案是有优势的。

【参考方案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>

应该可以。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

没有标签条件怎么办？

您可以使用v-if 和v-else 或将渲染函数作为prop（标签）传递，以渲染包装器