通过prop向子组件传值,使用该方法时,在我的项目中,得到的数据为空。我的代码如下

1、父组件引用子组件,filelookIds是通过axios请求向后台获取的数据

<file-list-look :fileLookId="filelookIds" />

2、子组件通过props接收 ,在methods方法里面,打印console.log(this.fileLookId)为空,而在页面里面插入 {{fileLookId}}时就有数据

 props:{
   fileLookId:{
     type:String,
     default:''
   }
  },


created(){
     this.getFileList()
   },
  methods:{
    // 获取文件对象
    getFileList(){
      let param = {
        cnsIds:this.fileLookId
      }
      console.log(this.fileLookId)  //打印为空
      this.$api.commons.getFileInfoByIds(param).then(res => {
        if(res && res.data && res.data.code == '0'){
          this.filesList = res.data.data;
        }
      }
      ).catch(error => {})
    },
}

 回想着看其他父传子这样做并没有什么问题,单这个就为空。后面想想是否是因为要传的数据是后端请求过来的原因,需要实时监控它才行。所以在子组件加入watch监听fileLookId值,并把created里面的方法写在watch里面

watch: {
     'fileLookId': function () {
      this.getFileList()
     }
    },

父组件通过 props 向子组件传递异步数据时,在父实例完成模板编译之后,异步数据数据还未到达,这时子组件获取到的数据就为空

方法: 

数据到达后再传递:即等父组件确认从后端获取到数据之后再通过 prop 传递给子组件,在子组件上写v-if="filelookIds!= null"

监听父组件改变的 prop:在子组件中定义 watch 属性监听父组件通过 prop 传递数据的变化情况

Logo

前往低代码交流专区

更多推荐