Vue子组件输入框:value绑定显示异常，如何正确渲染父组件传值？

核心问题 #

你在子组件输入框上绑定的:value="{data: data}"是将一个包含data属性的对象赋值给了输入框的value属性。输入框的value仅接受字符串/数值类型，浏览器会自动将对象转换为字符串[object Object]，这就是你看到异常显示的原因。

直接修复方案 #

既然父组件传入的data本身就是字符串类型的"Title"，直接将输入框的value绑定为data即可：

错误代码：

<!-- 子组件输入框错误写法 -->
<input :value="{data: data}" />

修复后代码：

<!-- 子组件输入框正确写法 -->
<input :value="data" />

进阶：实现双向数据绑定（可选） #

如果需要让输入框的内容修改后同步回父组件的title，可以通过手动绑定input事件实现：

子组件代码：

<template>
  <input 
    :value="data" 
    @input="$emit('update:data', $event.target.value)" 
  />
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      required: true
    }
  }
}
</script>

父组件使用时，加上.sync修饰符：

<TitledInput :data.sync="title" />

或者使用Vue 3的标准v-model语法（更推荐）：

子组件代码：

<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)" 
  />
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  }
})
defineEmits(['update:modelValue'])
</script>

父组件使用：

<TitledInput v-model="title" />

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