子组件怎么调用ajax,子组件如何获取父组件 ajax 获取的数据

在Vue组件中,作者尝试通过AJAX从服务器获取数据并更新父组件的数据列表,但发现子组件并未接收到更新。文章探讨了数据响应性及如何解决跨组件数据传递的问题,以及遇到的具体报错情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.slide-wrap{

padding-top: 20px;

text-align: center;

margin: 0 auto;

}

import slide from '../components/slideShow'

export default {

data() {

return {

list: []

}

},

created(){

this.$http.get('/api/getSlides')

.then(

(data) => {

let d = data.body

this.list = d

},

(err) => {

console.log(err)

}

)

},

components: {

//需要被注册的组件

slide

}

}

案例里面的 slides 数据是在 index.vue 文件里本地写的一个数组,我把这个数组的数据用 ajax 获取在修改 this.list 这个数组, 可是到子组件 slide 里的时候这个数据还是为空.

slide 组件里的代码与老师课程里一样, 我在这个组件的 created 钩子函数里获取 this.list 就获取不到传过来的数据, 这些数据在父组件 ajax 成功的时候不应该重新把父组件里的 list:[] 重新 赋值了吗? 如果重新赋值了, 不是直接是响应式的么..

希望老师解答一下疑惑..

报错如下

76818ff3e052532ae2fa5f5d3ec08ad0.png

在 db.json 文件里明明有这个字段

e85292daa0ce85ff4606a4d0335033fa.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值