Vue - 在 <component> ：is 上使用 v 模型

Question

在Vue中是否有一种方法可以在:is='tag'指定标签的<component>上使用v-model(其中tag显然解析为"输入")?

这不起作用，即输入不包含起始值"init"

<script>
import { ref } from 'vue'
export default {
setup() {
const tag = 'input'
const bar = ref('init')
return { tag, bar }
}
}
</script>
<template>
<component :is='tag' v-model='bar' />
</template>

这显然是有效的，但是我可以用一个动态标签名做到这一点吗?

<script>
import { ref } from 'vue'
export default {
setup() {
const bar = ref('init')
return { bar }
}
}
</script>
<template>
<input v-model='bar' />
</template>

Answer 1

无论在Vue组件上使用v-model合成糖还是在本地html标签上使用它都是不同的。

当用于组件时，<MyInput v-model="msg" />相当于使用
<MyInput :value="msg" @update:value="val => msg = val" />。

<input>标签
<input :value="msg" @input="evt => msg = evt.target.value" />.

当使用动态组件<component :is="" />时，Vue通常假设它将是Vue组件，因此它将绑定事件@update:value，这不是由<input>元素触发的，因此不会更新您的绑定变量。

在这里，您应该将v-model分解为prop +事件，就像在本地input标记上一样:

<component :is="tag" :value="bar" @input="evt => bar = evt.target.value" />