Vue中如何通过v-model将父组件数据传递给子组件的input标签

问题描述 #

尝试通过代码将父组件的值传递给子组件，子组件中用:value和@input模拟v-model绑定标签，但点击父组件按钮执行refInputModel.value = "changed"后，子组件的并未同步更新值，需要实现父组件向子组件带v-model的正确传值。

原代码问题分析 #

1. Prop名称不匹配：父组件传递的prop是refInputModel，但子组件接收的prop是inputModel，名称不一致导致子组件无法正确接收父组件的值。
2. 内部ref未同步props更新：子组件用ref(props.inputModel)初始化内部变量，但props更新时，这个ref不会自动同步，因为初始化后两者就断开了关联。
3. 父组件冗余代码：根组件App无需接收inputModel_ props，这段代码属于无效代码。

解决方案 #

方案一：使用Vue v-model语法糖（推荐） #

利用Vue的v-model语法糖，简化父子组件的双向绑定逻辑。

父组件（App.vue）修改后代码

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <button @click="counterFunc">methodHandler</button>
    <!-- 使用v-model绑定 -->
    <hello-world v-model="refInputModel"/>
  </div>
</template>

<script> 
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup> 
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue' 

// 初始化ref值，删除冗余的defineProps
let refInputModel = ref('')

const counterFunc = () => {
  refInputModel.value = "changed"
}
</script>

子组件（HelloWorld.vue）修改后代码

<template>
  <div class="hello">
    <!-- 通过:value接收modelValue，@input触发update事件 -->
    <input 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<script setup> 
import { defineProps, defineEmits } from 'vue'

// 接收v-model默认的modelValue prop
const props = defineProps(['modelValue'])
// 定义update事件
const emit = defineEmits(['update:modelValue'])
</script>

方案二：监听Props变化同步内部Ref #

如果需要保留子组件内部的ref变量，可以通过watch监听props的变化，手动同步更新。

父组件（App.vue）修改后代码

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <button @click="counterFunc">methodHandler</button>
    <!-- 传递正确名称的prop -->
    <hello-world :refInputModel="refInputModel"/>
  </div>
</template>

<script> 
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup> 
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue' 

let refInputModel = ref('')

const counterFunc = () => {
  refInputModel.value = "changed"
}
</script>

子组件（HelloWorld.vue）修改后代码

<template>
  <div class="hello">
    <input 
      :value="refInputModel" 
      @input="refInputModel = $event.target.value"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<script setup> 
import { defineProps, ref, watch } from 'vue'

// 接收和父组件一致的prop名称
const props = defineProps(['refInputModel'])
let refInputModel = ref(props.refInputModel)

// 监听props变化，同步更新内部ref
watch(() => props.refInputModel, (newVal) => {
  refInputModel.value = newVal
})
</script>

关键要点 #

• 确保父子组件的prop名称完全匹配，避免因名称不一致导致传值失败。
• 子组件内部若使用ref存储props值，必须通过watch监听props变化来同步更新，否则props更新后内部ref不会自动变化。
• 推荐使用Vue的v-model语法糖，它是:modelValue和@update:modelValue的语法糖，能简化双向绑定的实现逻辑。

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