Vue.js：如何向作为Props传递的数组中添加新元素？

核心思路：本地维护数据副本 + 事件同步父组件状态 #

Vue禁止直接修改Props（会破坏单向数据流规则），按以下步骤实现需求：

1. 子组件内创建本地数据副本

在LocationForm.vue中定义本地响应式数据，将传入的location props深拷贝后作为初始值，后续操作本地数据即可避免prop mutation错误：

// Vue3 写法
import { ref, watch, deepRef } from 'vue';

export default {
  props: {
    location: {
      type: Object,
      required: false,
      default: () => ({
        name: '',
        streetAddress1: '',
        blackouts: [],
      })
    },
  },
  setup(props, { emit }) {
    // 深拷贝props数据，确保嵌套数组的响应式
    const localLocation = deepRef({ 
      ...props.location, 
      blackouts: [...props.location.blackouts] 
    });

    return { localLocation, emit };
  }
}

// Vue2 写法
export default {
  props: { /* 原有props定义不变 */ },
  data() {
    return {
      localLocation: { 
        ...this.location, 
        blackouts: [...this.location.blackouts] 
      }
    }
  }
}

2. 监听Props变化，同步本地数据

如果父组件的location更新，子组件本地数据需要同步跟进，添加watch监听：

// Vue3 setup内的监听
watch(() => props.location, (newLoc) => {
  localLocation.value = { 
    ...newLoc, 
    blackouts: [...newLoc.blackouts] 
  };
}, { deep: true });

// Vue2 监听写法
watch: {
  location: {
    handler(newLoc) {
      this.localLocation = { 
        ...newLoc, 
        blackouts: [...newLoc.blackouts] 
      };
    },
    deep: true
  }
}

3. 调整渲染与验证逻辑，改用本地数据

将原基于$v.location的代码替换为本地数据localLocation：

<!-- 黑out日期渲染部分 -->
<div v-for="(blackout, idx) in $v.localLocation.blackouts.$each.$iter"
     :key="idx"
     class="space-y-6"
>...</div>

同时Vuelidate的验证规则也要对应指向localLocation：

// 示例验证规则（Vue3）
import { required } from '@vuelidate/validators';

export default {
  setup() {
    const rules = {
      localLocation: {
        name: { required },
        streetAddress1: { required },
        blackouts: {
          $each: {
            date: { required } // 按你的字段需求定义规则
          }
        }
      }
    };
    return { rules };
  }
}

4. 添加黑out日期并同步父组件

点击添加按钮时，修改本地数组后通过自定义事件通知父组件更新源数据：

// Vue3 添加方法
const addBlackout = () => {
  // 向本地数组推入新的空对象（按你的字段结构调整）
  localLocation.value.blackouts.push({ date: '' });
  // 触发事件传递更新后的数据
  emit('update:location', { ...localLocation.value });
};

// Vue2 添加方法
methods: {
  addBlackout() {
    this.localLocation.blackouts.push({ date: '' });
    this.$emit('update:location', { ...this.localLocation });
  }
}

父组件监听事件并更新自身数据：

<!-- 父组件模板 -->
<LocationForm :location="location" @update:location="location = $event" />

这套方案既符合Vue单向数据流规范，又能实现表单回显、添加黑out日期及验证功能。

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