Vue项目中如何将父组件传入的prop添加到子组件的现有数组中

你已经完成了跨组件的值传递，只需要在列表组件监听传入的newBinLocation prop变化，触发你预先写好的btnAdd新增方法即可，具体修改如下：

步骤1：修改列表组件（BinInfo）添加监听逻辑 #

在BinInfo组件的script部分新增watch配置，监听prop值的变化：

<script>
export default {
  // 原有data、props、methods配置保持不变
  watch: {
    newBinLocation(newVal) {
      // 非空校验，避免插入空白数据
      if (newVal?.trim()) {
        this.btnAdd()
        // 新增完成后通知父组件清空传递值，避免重复添加相同内容
        this.$emit('resetNewBin')
      }
    }
  }
}
</script>

步骤2：修改父组件配套逻辑 #

父组件需要接收列表组件的清空事件，重置newBinLocation，避免后续输入相同内容时不触发监听，修改模板里的BinInfo组件绑定即可：

<BinInfo :newBinLocation="newBinLocation" @resetNewBin="newBinLocation = ''"/>

步骤3（可选优化）：弹窗提交后自动关闭并清空输入 #

修改弹窗组件（Modal）的btnAdd方法，提交后自动关闭弹窗、清空输入框：

methods:{
  btnAdd(){
    this.$emit('addLocation', this.addBinLocation)
    // 关闭bootstrap弹窗（需确保项目已引入bootstrap的js文件）
    const modal = bootstrap.Modal.getInstance(document.getElementById('staticBackdrop'))
    modal?.hide()
    // 清空弹窗输入框
    this.addBinLocation = ''
  }
}

内容的提问来源于stack exchange，提问作者Muhammad Ameen Sheikh