Vue组件Prop可在模板使用但无法在Script中访问的问题

你的问题出在访问Prop的方式和时机不对：

1. 你在<script>的根级别直接调用filterData，这个变量在当前全局作用域里根本不存在——Vue的Props是挂载到组件实例（this）上的，必须通过实例访问。
2. 即使要打印Prop，也得等组件实例初始化完成后才行，所以要放在组件的生命周期钩子（比如created、mounted）里执行。

修正后的子组件代码如下：

<template>
  <div v-for="(product, index) in filterData" :key="index">
    <div class='productName'>{{product.title}}</div>                    
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
      productsData: {
          type: Array,
          required: true
      },
      filterData: {
          type: Array,
          required: true
      }
  },
  created() {
    // 通过this访问组件实例上的filterData
    console.log(this.filterData);
  }
};
</script>

补充说明：

• 模板里可以直接写filterData是因为Vue自动做了实例属性的代理，模板会自动关联到this.filterData。
• 如果需要在方法、计算属性或者其他逻辑里使用Prop，同样要通过this.xxx的方式访问。

内容的提问来源于stack exchange，提问作者Chobbit