Vue 3如何向子组件的数组类型prop追加数据而不覆盖？

核心原则：Vue 遵循单向数据流规范，子组件禁止直接修改 props 传参，所有数据更新逻辑优先放在父组件实现。

推荐方案：父组件维护完整已猜数组 #

你现在的问题本质是父组件更新 puzzleGuess 时直接赋值覆盖，而不是追加内容，只需要修改父组件的更新逻辑即可，子组件无需调整：

1. 父组件的 puzzleGuess 始终存储完整的已猜字符数组
2. 每次有新的猜字输入时，调用数组的 push 方法追加内容，不要直接赋值替换

父组件代码示例：

<template>
  <div class="home">
    <Puzzle :guess="puzzleGuess" />
    <!-- 示例：输入字符触发更新 -->
    <input @keyup.enter="handleGuess" v-model="inputChar" placeholder="输入猜测字符">
  </div>
</template>
<script>
import Puzzle from './Puzzle.vue'
export default {
  components: { Puzzle },
  data() {
    return {
      puzzleGuess: [], // 初始为空数组，存储所有已猜字符
      inputChar: ''
    }
  },
  methods: {
    handleGuess() {
      const char = this.inputChar.trim()
      if (!char) return
      // 不要写 this.puzzleGuess = [char] 会覆盖原有内容
      // 改成push追加新字符
      this.puzzleGuess.push(char)
      this.inputChar = ''
    }
  }
}
</script>

备选方案：子组件维护本地数组 #

如果你的业务场景里父组件只能每次传递最新的单个字符，不能维护完整数组，可以在子组件监听prop变化，追加到本地存储的数组中：

1. 子组件新增本地响应式变量存储完整已猜数组
2. 监听父组件传的 guess prop，有更新就追加到本地数组

修改后的子组件代码：

<template>
    <div>
        <div class="row">
            <img :src="require(`@/assets/${imgPath}`)" alt="Puzzle image" class="puzzleImage" >
        </div>
        <div class="row puzzleIcon" :key="i" v-for="(char, i) in word">
            <span v-if="hasGuessedChar(char)">{{char}}</span>
            <span v-else>
                <i class="large material-icons">remove</i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Puzzle',
    props: {
        word: Array,
        imgPath: String,
        guess: String, // 此处prop改为接收单个字符
    },
    data() {
        return {
            localGuess: [] // 子组件本地维护完整已猜数组
        }
    },
    watch: {
        // 监听父组件传的新字符，自动追加
        guess(newChar) {
            if (newChar && !this.localGuess.includes(newChar)) {
                this.localGuess.push(newChar)
            }
        }
    },
    methods: {
        hasGuessedChar(char) {
            if(char == '') return false;
            return this.localGuess.indexOf(char) > -1
        }
    }
}    
</script>

注意事项 #

优先选择推荐方案，所有共享数据放在上层父组件维护，更符合Vue的设计规范，后续排查问题、扩展功能的成本更低。

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