Prop 可在模板中使用，但不能在脚本中使用

Question

我有点困惑，因为我有一个名为

filterData

的道具，其中有一个数组从父应用程序发送到子应用程序，并且它都显示在 Vue 检查器中并带有填充的数组：

当我在子组件中将其作为

v-for

循环运行时，它也可以很好地用产品填充页面：

<div v-for="(product, index) in filterData" :key="index">

但是我无法在子区域

<script>

中访问它以从数据创建新函数。即使只是尝试

console.log(filterData)

也会得到

error 'filterData' is not defined

。

这是我的设置方法：

家长

import productData from './assets/products.json'

export default {
  name: 'App',
  data(){
    return{
      productData: productData
    }
  },
}

<template>
  <ChildComponent 
      :productsData="productData" 
      :filterData="productData.products"
    />
</template>

子组件

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

<script>
  console.log(filterData) // throws error

  export default {
    name: 'ChildComponent',
    props: {
        productsData: {
            type: Array,
            required: true
        },
        filterData: {
            type: Array,
            required: true
        }
    }
};
</script>

我尝试过查看像这样的其他问题一个，但他们通常会讨论我已经在工作的内容，对我如何使其工作有任何帮助吗？

Answer 1

为了访问脚本内的 prop，您需要在生命周期挂钩或方法中使用

this

来访问它们...

示例：

created() { console.log(this.filterData); }