Vue.js Vue道具未定义

我是Vue新手，尝试使用道具从子组件获取父组件数据，但在执行console.log（）时遇到未定义的错误

家长：

import axios from 'axios'
import PieChart from './components/PieChart'

export default {
  data () {
    return {
      requires: [],
      tested: [],
      requires_php: [],
      errors: [],
      url: 'https://api.miruc.co/plugins.min.json'
    }
  },
  created: function () {
    axios.get(this.url)
    .then(response => {
      this.requires = response.data[0]
      this.tested = response.data[1]
      this.requires_php = response.data[2]
    })
    .catch(e => {
      this.errors.push(e)
    })
  },
  components: {
    'pie-chart': PieChart
  }
}

儿童：

export default {
  extends: Pie,
  props: ['req'],
  mounted: function () {
    console.log(this.req)
    /*  */
  }
}

---

有人能告诉我我犯了什么错误吗？

您需要将道具传递给父模板中的子组件，例如：

<template>
//...
    <pie-chart :req="requires"></pie-chart>
//...
</template>

//...
//...

我不知道您对模板代码做了什么。但看看当您像这样更改家长的代码时会发生什么：

import axios from 'axios'
import PieChart from './components/PieChart'

export default {
  data () {
    return {
      requires: [],
      tested: [],
      requires_php: [],
      errors: [],
      url: 'https://api.miruc.co/plugins.min.json'
    }
  },
  created: function () {
    axios.get(this.url)
    .then(response => {
      Vue.set(this, 'requires', response.data[0])
      Vue.set(this, 'tested', response.data[1])
      Vue.set(this, 'requires_php', response.data[2])
    })
    .catch(e => {
      this.errors.push(e)
    })
  },
  components: {
    'pie-chart': PieChart
  }
}

---

要记住一件事：无论何时设置数组或对象元素，都要使用

Vue.set

。它确保了内部元素的反应性。

我猜在到达console.log时http get仍在运行。@RichardMatsen我尝试了

setTimeout（function（）{alert（this.req）}，10000）

，但仍然得到了相同的错误。甚至Chrome上的Vue扩展都说它是未定义的。你可以通过在

方法中放置另一个console.log来确定。然后（response=>{

方法，看看它们的出现顺序。我在那里没有定义…很奇怪，Vue扩展说它存储了一个对象。好吧，我没想到会这样。“Vue扩展”-那是什么？