本文问题解决参考https://segmentfault.com/q/1010000010167688

 

问题:

如何把父组件动态传递ajax数据,并更新子组件的内容

注意:

在父组件中获取ajax数据,由于是异步获取,所以子组件mounted阶段,ajax仍未完成请求,所以使用:bind方法传递到子组件的数据获取为undefined

 

 

方法:

子组件中,使用watch,监听传参的变化,当监听到数据时,更新调用方法更新数据

 

例子:

父组件

通过ajax获取到数据并存入datajson对象中,通过bind的方法传递参数给子组件

<router-view :datajson="datajson"></router-view>

子组件

通过props接受参数后,监听参数的变化,

watch选项

使用immidate选项 ,使监听开始时立即调用函数,更新获取到父组件传递的参数,

    props: {
      datajson: Object
    }, 
    watch: {
      datajson: {
        handler () {
          // 监听获取ajax数据
          this.getHomeInfo()
        },
        // 监听到数据变化时立即调用
        immediate: true
     }
    },
    methods: {
      getHomeInfo () {
        this.goods = this.datajson.goods
        console.log(this.datajson)
      }
    }

 

 

本文为个人学习笔记,如有错误,请多多指点,谢谢!!

Logo

前往低代码交流专区

更多推荐