子组件如何获取父组件 ajax 获取的数据

Question

<template>
    <div>
      <slide :list="list"></slide>
    </div>
</template>
<style>
  .slide-wrap{
    padding-top: 20px;
    text-align: center;
    margin: 0 auto;
  }

</style>
<script>
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
    }


  }
</script>

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

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

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

报错如下

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

Answer 1

fishenal 2017-05-09 08:54:35

slides里是怎么取的url啊，

slides作为一个子组件，通过props拿到的list，你检查一下，应该是一个完整的对象，带url的。

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

          .then(

            (res) => {

              let d = data.body

              this.list = res.data

            },

            (err) => {

              console.log(err)

            }

          )

子组件 mounted里看一下 this.list 是什么

Answer 2

fishenal 2017-05-07 19:12:13

ajax成功的回调 应该是data.data吧， 应该是 (res) => { let d = res.data } ， 把返回的参数打印出来看看结构，我记得vue-resource是 res.data。

回调的参数会直接更新子组件的属性，这点没问题。

console里的对象，点开看，数据（db.json里的）存在哪个字段里。

• 提问者 吴阿铸 #1

  https://github.com/wuazhu/ai-start-kits    在评论里了改成 data.data 也是一样报错...   这是 git 地址, 辛苦老师帮忙看看

• 提问者 吴阿铸 #2

  把出现的问题打在评论上了, 老师帮忙在看看

Answer 3

提问者 吴阿铸 2017-05-08 00:34:40

data.data 没问题, 可是传过去第一个 console.log 是我在 slide 组件里data() 里 console 的, 没有值...  并且报错没有这个key 值..  可是我 db.json 明明有啊..

db.json
{
  "getBordList": [
    {
      "id":1,
      "title": "banner",
      "url": "/"
    },
    {
      "id":2,
      "title": "counter 计数器",
      "url": "counter"
    },
    {
      "id":3,
      "title": "开放产品3",
      "url": "home"
    },
    {
      "id":4,
      "title": "开放产品4",
      "url": "home"
    }
  ],
  "getSlides": [
    {
      "id": 1,
      "title": "幻灯片第1张",
      "src": "http://img1.sycdn.imooc.com//5903688d000141fd12000460.jpg",
      "url": "http://imooc.com"
    },
    {
      "id":2,
      "title":"幻灯片第2张",
      "src": "http://img1.sycdn.imooc.com//590a9da300016c5612000460.jpg",
      "url": "http://imooc.com"
    },
    {
      "id":3,
      "title":"幻灯片第3张",
      "src": "http://img1.sycdn.imooc.com//590ad0ca00018d0b12000460.jpg",
      "url": "http://imooc.com"
    },
    {
      "id":4,
      "title":"幻灯片第3张",
      "src": "http://img1.sycdn.imooc.com//5903665f00011baa12000460.jpg",
      "url": "http://imooc.com"
    }
  ]
}

Answer 4

提问者 吴阿铸 2017-05-07 15:58:19

@fishenal  老师求助啊

• qq_Mr_9 #1

  我在项目里也遇到这个问题，因为是异步取值所以所以子组件在渲染出来的时候还没有获取到父组件的异步取值，现在想到的解决办法是如果子组件不是复用类型的，直接在子组件通过axios获取数据

• fishenal 回复 qq_Mr_9 #2

  子组件接收的数据是动态更新的啊，父组件的数据更新了子组件也会更新，是不是顺序有问题？