这个问题遇到很多次，就是父组件中通过接口获取的数据，传给子组件，在子组件打印是空的

原因：接口获取数据需要时间，而在这个数据没有获取到之前，子组件已经渲染完成，自然就拿不到数据了

目前测试的有效的方法：

1.当这个数据获取到的时候，再进行渲染，

局限: 如果是弹框获取的话，就会产生一秒之后弹框才会出来的现象，影响界面效果
 

//子组件
<claimPerson 
	ref='person' 
	v-if='JSON.stringify(list) !== "{}"'
	:parentMessage='list' 
/>
//在子组件中 watch 监听，父组件获取到值，这个值就会变化，自然是可以监听到的
 watch:{
    parentMessage:{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.parentMessage = newVal
        })
      }
    }
}

2.在子组件对传入的数据进行监听（有关组件注册等就不在写了） 

弊端：
这种方法的局限在于只能在监听函数里面对传入的值进行操作，如果数据操作量大，可能也会导致多次调用 

 

子组件
data:{
	newList:[]
},
props:['list'],
watch:{
	list:function(val) {
		console.log(val,'异步传入的') //此处赋值新值
		this.newList=val
	}
}

父组件
mounted(){
	this.getComponentsData()
},
methods:{
	getComponentsData(){
		this.$apibwx.request(
		    'addons/litestore/api.goods/categorList',null,'post',
			null,
			function(res) {
				_this.testList = res.data.data
			})
	}
}

3.vuex 状态管理，利用 mapActions, mapState映射 

注意：这里就可以不在父组件调用接口了，直接在使用的子组件调用即可 

store.js 

import Vue from 'vue'
import Vuex from 'vuex'
import api from '../api/api.js' //自己封装的api

Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		testData:[] //首先定义state中的数据
	},
	mutations: {
		//修改state中的值
		SET_TESTDATA(state,res) {
			state.testData = res.data.data
		}
	},
	actions: {
		GETSET_TESTDATA({commit}) {
			return new Promise((resolve,reject)=>{
				api.request('addons/litestore/api.goods/categorList',
				null, 'get', null, 
				function(res) {
					if (res.data.code == 1) {
						// 触发mutations方法修改state
						commit('SET_TESTDATA', res)
						resolve(res)
					} else {
						reject(res)
					}
				})
			})
		}	
  })
  export default store

 子组件

import { mapState} from 'vuex'
	export default {
		props:['list'],
		data() {
			return {
			}
		},
		computed: {
			...mapState(['testData'])
		},
		created() {
			 this.$store.dispatch('GETSET_TESTDATA')
		},
		mounted() {
			console.log(this.testData,'此处可以打印到了')
		}
	}

有个疑问，当我用mapActions去调用时，在mounted里面是打印的数据时空值。
用$dispatch去调用，则可以打印出
区别在于 它们执行顺序不同， 

mapActions 是在打印的后面执行
  

this.$dispatch则是先执行调用接口，再打印
  

 

以上是我个人测试，如果有不对的地方，欢迎指正😊