Vue中能否为:is指定为input的动态组件使用v-model？

使用<component :is="tag">动态指定input标签时，直接绑定v-model无法生效（比如初始值不显示），这是因为Vue对原生input的v-model语法糖处理逻辑，不会自动应用在动态组件上。

核心原因 #

原生<input v-model="bar">本质是:value="bar" + @input="bar = $event.target.value"的语法糖，但动态组件<component>的逻辑更通用，不会自动将v-model转换为原生元素对应的属性和事件绑定，所以需要手动拆解。

正确写法 #

将v-model替换为手动绑定value属性和input事件：

<script>
import { ref } from 'vue'
export default {
  setup() {
    const tag = 'input'
    const bar = ref('init')
    return { tag, bar }
  }
}
</script>

<template>
  <component 
    :is="tag" 
    :value="bar" 
    @input="bar = $event.target.value" 
  />
</template>

这样就能实现和直接使用<input v-model="bar">完全一致的双向绑定效果，初始值和输入同步都会正常工作。

内容的提问来源于stack exchange，提问作者Mitya