Vue2子组件接收父组件传递的threshold props值为undefined如何解决

父组件向子组件传参代码如下：

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

子组件已经在props配置中声明接收对应属性：

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

父组件中直接打印threshold变量可以正常拿到值：

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

但子组件内执行console.log(this.threshold)输出为undefined。

按优先级从高到低排查：

• 先查拼写低级错误：逐字核对子组件props数组里的threshold字符串，有没有多打不可见空格、拼错字母——你贴的代码里'show_costs','threshold'两个字符串之间逗号后没空格，要确认是不是手滑在threshold前面加了空格、或者大小写写错，只要props声明的字符串和传参时的属性名对不上，就会拿不到值。
• 查v-if和变量赋值的时序问题：你给组件加了v-if="group_by == 'Project'"，如果group_by切到Project的时机比threshold赋值的时机早，组件首次挂载时父组件的threshold还没赋值，拿到的就是undefined。如果后续threshold的更新不是响应式的，子组件也不会同步到新值。可以临时把v-if换成v-show测试，如果换完能正常拿到值，就调整逻辑：等threshold完成赋值后再把v-if条件置为true，或者传参时加兜底：:threshold="threshold || {}"。
• 查prop访问时机：如果你的console.log(this.threshold)写在beforeCreate生命周期里，这时候props还没完成初始化绑定，必然返回undefined。把打印逻辑移到created/mounted钩子，或者直接在子组件模板里写{{ threshold }}渲染测试，排除时机问题。
• 查同名属性覆盖：翻一下子组件的data、computed、methods里有没有定义叫threshold的变量/方法，同名的本地变量会覆盖props传入的值，如果你本地声明的threshold没赋初始值，打印出来就是undefined。
• 查父组件变量的响应式：如果是Vue2项目，threshold如果不是提前在父组件data里声明的初始属性，而是后续逻辑里直接通过this.threshold = xxx新增的，Vue2无法检测到这个新增属性的变化，子组件既拿不到初始值，也不会同步更新。这种情况要么提前在父组件data里给threshold设初始值，要么用this.$set做响应式赋值。
• 查组件注册匹配问题：确认模板里渲染的<Project />就是你写了对应props声明的组件，排查有没有重名的全局/局部组件覆盖、import路径写错加载了其他同名组件的情况，可以在子组件created钩子里打印个唯一标记（比如组件名），确认实际渲染的是目标组件。
• 快速定位技巧：在子组件模板最外层加一行{{ $attrs }}，页面上会渲染所有传入但没被props声明接收的属性，如果这里面能看到threshold，说明你props声明有问题；如果看不到，说明父组件根本没把值传过来，回头查父组件的变量作用域、v-if条件是否真的生效。

内容的提问来源于stack exchange，提问作者Jarliev Pérez