本文主要是介绍vue 中父组件怎么将异步请求回来的数据传递给子组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题：
vue项目中，如何将后台请求回来的数据，传递给子组件呢？
思路
此时肯定会想到v-bind自定义属性传值，子组件props来接收，但是很可惜，如果只是按照普通的父传子做法来做，最后的结果是子组件拿到数据的初始值，并没有拿到数据，然后报错 invalid prop
原因
原因很简单，还没有等到父组件赋值给它就已经把data里面这个自定义属性所绑定的初始值传过去了，
就是下面代码中的article，没有等到后台数据赋值article就把data里的article（null）传过去了。
代码实现
父组件
<template>...... <template slot-scope="scope"><el-button type="text" @click="hPreview(scope.row.articleBody)">预览</el-button></template>......<!-- 预览弹框 子组件 --><el-dialogwidth="60%"title="预览文章":visible.sync="showDialog"append-to-body><articles-preview :content = "article" v-if="article&&articleFlag"/></el-dialog></div>
</template><script>
import articlesPreview from '../components/articles-preview.vue'export default {components: { articlesPreview },data () {return {article: null,articleFlag: false,showDialog: false,}},methods: {// 当点击了预览hPreview (art) {this.article = art// console.log(this.article)this.articleFlag = truethis.showDialog = true}
子组件
<template><div class='container'><div v-html="content"></div></div>
</template><script>
export default {props: {content: {type: String,required: true}}
}
</script><style scoped lang='less'></style>点睛之笔
这里使用v-if做了一个判断，当有article并且标记articleFlag为true的时候，子组件才存在并且传值过去。（articleFlag为true就说明后台请求的数据已经赋值给了article），如果不使用v-if，子组件props接到的result就是初始值并没有数据
这篇关于vue 中父组件怎么将异步请求回来的数据传递给子组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
