VUE 2关于儿童组件的道具未定义

Question

因此，我试图将道具传递给儿童组件，如下所示。

<Project :grossMarginPerResource="grossMarginPerResource" :threshold="threshold" :orderBy="orderBy" @refetch="refetch" v-if="group_by == 'Project'"></Project>

道具时，子组件都会接受此道具

props: ['grossMarginPerResource', 'orderBy', 'show_costs','threshold'],

每当我尝试访问此

，要么通过登录控制台，它将其打印为未定义，在父级中记录它，显示以下内容：

{ "green": "1000", "yellow": "400", "red": "400" } 

但是，如果我在子组件中使用：

console.log(this.threshold)

它将打印出未定义的未定义

Answer 1

它应该有效，要找到根本原因，我刚刚创建了此代码段，并且根据您上面提到的代码正常工作。您能在所有生命周期挂钩中返回threshold数据，请浏览一下您面临哪个位置的问题。

演示：

Vue.component('Project', {
  props: ['threshold'],
  template: '<pre>{{ threshold }}</pre>',
  mounted() {
    console.log(this.threshold)
  }
});

var app = new Vue({
  el: '#app',
  data: {
        threshold: { "green": "1000", "yellow": "400", "red": "400" }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Project :threshold="threshold"></Project>
</div>