父组件传递异步请求的数据给子组件,子组件打印为空

碰到一个这样的问题,

// 父组件

<nav-head :projeList="projeList" @getMessage="getmessagefromChild"></nav-head>

传递的projeList ,是从created函数中执行获取到的
// 子组件

props:["projeList"],

created() {
  	console.log("测试",this.projeList)
},

接口是有数据的,但是子组件就是获取不到。

解决:

// 父组件 

<div v-if="projeList.length>0">
	<nav-head :projeList="projeList" @getMessage="getmessagefromChild"></nav-head>
</div>

在父组件上加一层div,等projeList有数据之后,再去加载子组件。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下方式将异步获取的数据传递给子组件: 1. 使用 props 将数据传递给子组件 组件中,可以通过异步请求获取数据后,在渲染组件时通过 props 将数据传递给子组件。示例代码: ```vue <template> <div> <child-component :data="data"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { data: [] } }, async created() { const response = await fetch('https://api.example.com/data') this.data = await response.json() } } </script> ``` 在组件中,通过 props 接收传递过来的数据并进行渲染。示例代码: ```vue <template> <ul> <li v-for="item in data" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { props: { data: { type: Array, required: true } } } </script> ``` 2. 使用 provide/inject 在组件中提供数据组件中注入数据组件中,可以通过 provide 方法提供数据组件中通过 inject 方法注入数据。示例代码: ```vue // 组件 <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { data: [] } }, async created() { const response = await fetch('https://api.example.com/data') this.data = await response.json() }, provide: { fetchData: this.fetchData // 将 fetchData 方法提供给子组件 }, methods: { fetchData() { return this.data } } } </script> // 组件 <template> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { inject: ['fetchData'], // 注入 fetchData 方法 computed: { dataList() { return this.fetchData() // 获取组件提供的数据 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值