vue使用axios获取异步数据传值到子组件无法获取值

一，问题描述

在使用vue做项目，组件内使用axios获取异步数据传递到子组件，很多人都会遇到的一个问题，数据都拿到了但是在子组件无法渲染，在子组件ceated里面打印也是空的,

//子组件
props:{
    list:{
        type:Array,
        default:() => [] //使用工厂函数指定默认值
    }
},
created(){
    console.log(this.list) //[]打印结果为空
}

//父组件
data(){
    return:{
        list:[]
    }
}
mounted(){
    this.$axios.get('/api').then(res => {
        console.log(res.data) //父组件可以拿到值
        this.list = res.data  //list 有值
    })
}

二，原因

在父组件请求数据时，子组件已经加载完毕，走完了子组件的生命周期，因为子组件props默认定义了一个空数组，所以在子组件的整个生命周期中都是空数组，自然不能渲染出来

三，解决办法，综合网上的各种办法，我这里总结一下

1. 使用v-if判断，当list获取到了异步请求获取的数据，再让子组件显示，这样子组件就一定可以拿到异步的那个值
   缺点：当异步请求比较慢时子组件一直无法显示，只有请求到数据时才能显示

<child v-if="list.length>0"></child>

2. 监听一下父组件传值过的值，然后有变化了的时候再赋值给data，渲染的时候用data里的数据，这样就能保证随时动态更新数据
   缺点：无法监听对象属性值的变化
   解决：使用deep:true 深度监听

data(){
    return:{
        listItems:[]
    }
},
watch:{
    list(val){
        this.listItem = val
    }
}

3. 还有一种办法，就是子组件直接使用父组件传值过来的值，子组件渲染就用props传值过来的list

//子组件
<ul>
    <li v-for="item in list">{{item.name}}</li>
</ul>

4. 使用计算属性

data(){
    return:{}
},
computed:{
    listItems(){
        return this.list
    }
}

5. 使用vuex，利用vuex的全局状态管理，父组件获取数据存放到vuex，子组件从vuex从获取，肯定能拿到值，但是使用vuex要注意，不要滥用，如果获取的数据较多存到vuex会占用内存，影响性能,这里只是做了一个示例，

//store.js
import vue from 'vue'
import vuex from 'vuex'

Vue.use(Vuex)

const state = {
  list:null
}
const mutations = {
  SETCOUNT(state,list){
    state.list= list
  }
}
const actions = {
  SETCOUNTFUN({commit},n){
    commit('SETCOUNT'，list)
  }
}
const store = new Vuex.Store({
  state,
  mutations,
  actions  
})

export default store

//父组件
data(){
    return:{
        list:[]
    }
}
mounted(){
    this.$axios.get('/api').then(res => {
        let list = res.data
        this.$store.dispatch('SETCOUNTFUN',list)
    })
}

//子组件
data(){
    return:{
        list:this.$store.state.list
    }
}

6. 补充一点，这是前面没有提到的一个问题，这个和echarts图表相关，一般我会把echarts封装成一个组件，通过父组件传值来显示echarts图表，这样的话减少了代码量，也更容易维护，那么问题来了？ 如果使用前面的几种方法可以实现图表的渲染吗？
   来看一下代码

• 直接使用props传递过来的值？

//这是子组件
props: {
    echartOption: {    //父组件传递option对象
      type: Object
    }
  },
  data() {
    return {
     echartChart:null
    }
  },
  methods: {
    // 初始化图表
    setEchart() {
      this.echartChart = this.$echarts.init(this.$refs.echart);
      this.echartChart.setOption(this.echartOption);
    },
    //自适应
    updateEchart() {
      window.addEventListener("resize", () => {
        this.echartChart.resize();
      });
    }
  },
  mounted() {
    this.setEchart();
    this.updateEchart();
  }

通过测试无法渲染

• 使用计算属性

//这是子组件
props: {
    echartOption: {    //父组件传递option对象
      type: Object
    }
  },
  data() {
    return {
     echartChart:null
    }
  },
  computed:{
    comEchartOption(){
       return this.echartOption    
    }
  },
  methods: {
    // 初始化图表
    setEchseart() {
      this.echartChart = this.$echarts.init(this.$refs.echart);
      this.echartChart.setOption(this.comEchartOption);  //这里使用计算属性的值
    },
    //自适应
    updateEchart() {
      window.addEventListener("resize", () => {
        this.echartChart.resize();
      });
    }
  },
  mounted() {
    this.setEchart();
    this.updateEchart();
  }

通过测试无法渲染

• 如果在父组件获取数据时存放到vuex中呢？子组件从vuex中获取数据总可以了吧？经过测试也不行~~~
  其实这个让我也头疼了一阵，其他的可以，为什么echarts图表渲染就不行？

查了很多资料，自己也反复测试了很多遍，才搞懂了，原来这个问题并不是说前面总结的方法就不能用，主要是echats的渲染方式，看过代码的也知道了，我是把echarts的初始化封装成一个方法setEchart(),然后在mounted的时候去执行这个方法初始化图表，大家都知道mounted()这个钩子函数只在页面加载完成后执行一次，所以setEchseart()也执行了一次，这个时候还没有echartOption传递过来，所以应该有很多人发现在打开页面的时候并没有echarts图表显示

这个时候我们就要做一件事，监听，因为当父组件异步获取数据成功之后会把值传递给子组件，但是子组件渲染完毕，mounted()执行完毕，所以不会再次执行setEchseart()方法，数据虽然刷新了，但是子组件不知道有值改变了，所以监听props传递过来的echartOption

//这是子组件
  watch: {
    // 监听传递过来值的变化，如果有变化就重新初始化echarts
    echartOption() {
      this.setEchart();
    }
  }

完美解决

总结

目前就总结如上的几种方法，如果后面有更好的方法，我会补充，你们有更好的方法，也可以分享给我哦！不足之处还请指正~~~