村农

莫笑农家腊酒浑,丰年留客足鸡豚。


vue 父组件异步传值给子组件

冬冬

开发中,肯定会遇到这样的场景,父组件调用接口向服务器请求数据,然后再通过props把数据传给子组件,结果子组件在时间周期 createdmounted中获取不到数据。

究其原因,是因为:数据为异步获取,在子组件渲染的时间周期里,数据还没取到,所以在created、mounted中,都拿不到数据。

解决办法:

1、设置一个flag,开始的时候让子组件隐藏,然后等数据返回的时候,让子组件显示。

<father-components>
    <child-components v-if="flag"></child-components>
</father-components>

2、子组件用watch监听prop过来的值变化,监听到值的变化,初始化值,进行渲染

<template>
  <div class="list">
    <ul v-if="list.length != 0">
      <li v-for="(item,index) in list" :key="index"</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['getList'], //接收一个数组
    data(){
      return {
        list: []
      }
    },
    watch:{   // 使用监听的方式,监听数据的变化
      getList(val){
        this.list = val;
      }
    }
}
</script>

3、通过vuex来传值;最灵活,复杂度也最高;