父组件向子组件传对象数组时刷新数据子组件接收不到问题

Matilda________

于 2022-01-07 15:59:01 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Matilda________/article/details/122363457

版权

本文探讨了在Vue中，父组件如何通过props向子组件传递数据。当传递基本数据类型时，子组件能自动响应变化。然而，对于对象或数组这类引用类型，子组件需要通过watch监听来捕获更新。示例展示了如何在子组件中设置watcher，确保在对象不为空时正确处理变化并触发相应的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件传基本数据类型值（Number、String、布尔值等），父组件传入的值刷新改变时，子组件可以接收得到。

父组件向子组件传引用类型值（ Object、Array等），父组件传入的值刷新改变时，子组件接收不到改变。这时需要使用watch进行监听。

// 子组件接收值
   props: {
      geoValue: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
// 监听该值，不为空时，在调用方法
    watch: {
      geoValue: {
        handler(val) {
          this.geoValue = val
          this.$nextTick(() => {
            if(this.geoValue.length !== 0){
              this.getChinaOption()
            }
          })
        },
        deep: true,
        immediate: true
      }
    }