前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。
问题:vue项目中,将后台请求回来的数据,传递给子组件,子组件拿到数据的初始值,并没有拿到数据
直接上代码
父组件
<!-- 省份数据 --> <el-card class="sfsj"> <province v-if="result&&resultflage" :result="result" ></province> <!-- @aaa="ccc" --> <!-- <exam-index></exam-index> --> </el-card> data(){ return { result: {}, // 全国总数据 resultflage:false, } } created(){ this.getAllCountry() }, methods: { async getAllCountry() { let res = await allCountry() this.result = res // 将数据保存在result this.resultflage=true // 做一个标记 } }
这里是将result传给子组件,如果不使用v-if,子组件props接到的result就是初始值并没有数据。原因就是这里没有等到后台数据赋值result就把data里的result(空对象)传过去了。这里使用v-if做了一个判断,当有result并且标记resultflage为true的时候,子组件才存在并且传值过去。(resultflage为true就说明后台请求的数据已经赋值给了result)
推荐大家使用v-if,别使用watch监听,否则你会搞到崩溃