Vue3如何动态绑定多个命名v-model？

在开发支持自定义插件的Vue3工具时，面对不同组件的多命名v-model（如v-model:foo、v-model:bar），硬编码绑定显然不适用，这里可以利用Vue3命名v-model的语法糖本质来实现动态绑定：

核心思路 #

Vue3的命名v-model本质是语法糖，v-model:xxx="val"等价于：

:xxx="val" @update:xxx="val = $event"

所以我们可以动态构建对应的props和事件监听对象，再通过v-bind和v-on批量绑定到组件上。

具体实现步骤 #

1. 定义插件配置结构
   让每个插件配置项包含组件实例和需要绑定的命名v-model字段列表：

   const pluginConfigs = ref([
     {
       component: MultiModelComponent, // 自定义组件
       modelFields: ['foo', 'bar']     // 该组件的命名v-model字段
     }
   ])
   

2. 统一存储组件数据
   用一个对象存储所有插件组件的v-model值，方便管理：

   const pluginData = ref({
     foo: '初始Foo值',
     bar: '初始Bar值'
   })
   

3. 动态构建props和监听事件
   编写工具函数，根据配置生成对应的props和事件监听对象：

   // 生成动态props
   const getDynamicProps = (item) => {
     const props = {}
     item.modelFields.forEach(field => {
       props[field] = pluginData.value[field]
     })
     return props
   }
   
   // 生成动态事件监听
   const getDynamicListeners = (item) => {
     const listeners = {}
     item.modelFields.forEach(field => {
       listeners[`update:${field}`] = (val) => {
         pluginData.value[field] = val
       }
     })
     return listeners
   }
   

4. 渲染组件并绑定
   用<component>动态渲染组件，批量绑定props和事件：

   <component 
     v-for="(item, index) in pluginConfigs" 
     :key="index"
     :is="item.component"
     v-bind="getDynamicProps(item)"
     v-on="getDynamicListeners(item)"
   ></component>
   

示例子组件（带多命名v-model） #

<template>
  <div>
    <input 
      :value="foo" 
      @input="$emit('update:foo', $event.target.value)" 
      placeholder="输入Foo"
    >
    <input 
      :value="bar" 
      @input="$emit('update:bar', $event.target.value)" 
      placeholder="输入Bar"
    >
  </div>
</template>

<script setup>
defineProps(['foo', 'bar'])
defineEmits(['update:foo', 'update:bar'])
</script>

这样不管插件组件有多少个命名v-model，只要在配置里声明对应的字段，就能自动完成双向绑定，完全适配自定义组件的多样需求。

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