Vue组件间assignmentData实时同步：file2如何获取file1动态数据

1. 子组件（file1.vue）的正确实现 #

file1作为提供数据的组件，需严格遵循Vue的props只读规则，通过事件触发数据更新：

<template>
  <input
    type="checkbox"
    :checked="assignmentData.selected"
    @change="handleChange"
  />
</template>

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

// 定义接收的props，确保类型和默认值正确
const props = defineProps({
  assignmentData: {
    type: Object,
    required: true,
    default: () => ({ selected: false })
  }
})

// 定义用于通知父组件更新的事件
const emit = defineEmits(['update:assignmentData'])

const handleChange = (e) => {
  // 创建新对象，避免直接修改props（Vue禁止直接修改props）
  const updatedData = {
    ...props.assignmentData,
    selected: e.target.checked
  }
  // 触发更新事件，传递新数据给父组件
  emit('update:assignmentData', updatedData)
}
</script>

2. 父组件（file2.vue）的实时绑定方式 #

在file2中通过v-model:assignmentData实现双向绑定，即可实时获取file1的变更数据：

<template>
  <File1 v-model:assignmentData="localAssignmentData" />
  <!-- 实时展示变更后的状态 -->
  <p>当前选中状态：{{ localAssignmentData.selected }}</p>
</template>

<script setup>
import { ref } from 'vue'
import File1 from './file1.vue'

// 父组件本地初始化数据，避免出现undefined
const localAssignmentData = ref({ selected: false })
</script>

3. 常见问题排查 #

• v-bind获取到undefined的原因
  • 父组件未初始化localAssignmentData，导致子组件接收的props为undefined，需确保父组件数据有初始值。
  • 子组件props未设置默认值，当父组件未传入数据时会出现undefined，需在props定义中添加default。
• 数据不实时更新的原因
  • 直接修改了子组件的props（如props.assignmentData.selected = true），Vue中props是只读的，必须通过emit事件通知父组件更新。

Vue2版本的实现方式 #

如果项目基于Vue2，写法调整如下：

file1.vue（子组件） #

<template>
  <input
    type="checkbox"
    :checked="assignmentData.selected"
    @change="handleChange"
  />
</template>

<script>
export default {
  props: {
    assignmentData: {
      type: Object,
      required: true,
      default: () => ({ selected: false })
    }
  },
  methods: {
    handleChange(e) {
      const updatedData = {
        ...this.assignmentData,
        selected: e.target.checked
      }
      this.$emit('update:assignmentData', updatedData)
    }
  }
}
</script>

file2.vue（父组件） #

<template>
  <File1 :assignmentData="localAssignmentData" @update:assignmentData="localAssignmentData = $event" />
  <p>当前选中状态：{{ localAssignmentData.selected }}</p>
</template>

<script>
import File1 from './file1.vue'

export default {
  components: { File1 },
  data() {
    return {
      localAssignmentData: { selected: false }
    }
  }
}
</script>

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