Vue组件如何传递并修改带参数的v-model？

你的输入框无法编辑、输入内容不保留，核心是子组件的事件触发逻辑写错了，另外组件配置也有小疏漏，具体修复如下：

子组件错误修复 #

1. 第一个输入框的@update:model-value里误用了emit，Vue选项式API的模板中必须用$emit触发事件，漏写了$符号
2. 选项式API的<script>部分需要用export default包裹完整配置，同时推荐显式声明emits，让组件逻辑更清晰

修复后的子组件代码：

<template>
  <q-input
    name="firstname"
    :value="windDirectionDep"
    @update:model-value="$emit('update:windDirectionDep', $event)" />
  
  <q-input
    name="lastname"
    :value="windDirectionArr"
    @update:model-value="$emit('update:windDirectionArr', $event)" />
</template>

<script>
export default {
  props: [
    'windDirectionDep',
    'windDirectionArr'
  ],
  // 显式声明触发的事件，可选但推荐
  emits: ['update:windDirectionDep', 'update:windDirectionArr']
}
</script>

父组件优化（可选） #

父组件逻辑本身没问题，但可以简化写法，同时注意不要漏子组件的引入：

<template>
  <Child
    v-model:windDirectionDep="names.fullname.firstname"
    v-model:windDirectionArr="names.fullname.lastname"/>
</template>

<script>
import { fullname } from '../'
import Child from './Child.vue' // 确保正确引入子组件

export default {
  components: { Child },
  data () {
    return {
      names: {}
    }
  },
  created () {
    this.names = fullname()
  }
}
</script>

原理说明 #

Vue的带参数v-model:xxx是语法糖：

• 向子组件传递xxx类型的prop
• 监听子组件触发的update:xxx事件，自动更新父组件绑定的变量

只要子组件正确接收prop，并在输入变化时触发对应update:xxx事件，父组件的变量就会同步更新，输入框内容也能正常保留。

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