Question

我是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)
    /*  */
  }
}

谁能告诉我我在做什么错？

Answer 1

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

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

Answer 2

我不知道你对模板代码做了什么。但是看看当你改变父母代码时会发生什么：

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。它确保内部元素的反应性。

Vue道具未定义

2 个答案: