Vue中子组件多输入框向父组件传值及changeData实现咨询

问题场景 #

父组件通过props向子组件传递userData对象，子组件通过输入框修改数据后需同步回父组件，现有代码需补全子组件的changeData函数，并确认是否需要使用computed避免不必要重渲染。

实现changeData函数 #

Vue中禁止直接修改props，需通过自定义事件将修改后的数据传递给父组件，由父组件更新响应式数据。具体实现步骤如下：

子组件修改 #

1. 定义自定义事件，用于向父组件传递更新后的数据
2. 给输入框添加name属性，区分修改的是firstName还是lastName
3. 实现changeData函数，获取输入值并触发事件

修改后的子组件代码：

<template>
  <label>First name</label>
  <!-- 添加name属性标记字段 -->
  <input :value="data.firstName" name="firstName" @input="changeData">

  <label>Last name</label>
  <input :value="data.lastName" name="lastName" @input="changeData">
</template>

<script setup>
const props = defineProps({
  data: Object
})
// 定义用于传递更新的事件
const emit = defineEmits(['update:data'])

function changeData(e) {
  const { name, value } = e.target
  // 创建新对象，避免直接修改props
  const updatedData = {
    ...props.data,
    [name]: value
  }
  // 触发事件，将新数据传给父组件
  emit('update:data', updatedData)
}
</script>

父组件修改 #

父组件监听子组件的update:data事件，更新自身的userData。也可以使用Vue的v-model语法糖简化代码：

修改后的父组件代码：

<template>
  <!-- 使用v-model:data语法糖，等价于:data="userData" + @update:data="userData = $event" -->
  <NameUser v-model:data="userData"></NameUser>
  <div>first name: {{ userData.firstName }}</div>
  <div>last name: {{ userData.lastName }}</div>
</template>

<script setup>
import { ref } from 'vue'
import NameUser from '../components/NameUser.vue';
const userData = ref({
  firstName: 'testName',
  lastName: 'testLastName'
})
</script>

是否需要使用computed避免重渲染？ #

不需要。原因如下：

• 我们没有直接修改props，而是通过事件通知父组件更新响应式数据，符合Vue的单向数据流规则
• Vue的响应式系统会精准追踪数据变化，只有当userData的属性值真正改变时，才会触发相关组件的重渲染，不存在多余的无效重渲染
• 若使用computed包装props，反而会增加不必要的复杂度，因为这里不需要对数据进行转换或缓存计算结果

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