vue.js - VueJS 将 prop 传递给子进程失败

Question

目前我正在使用 VueJS 开发产品编辑器，在将数据从父级传递给子级时遇到了问题。结构如下:

<ProductEdit>

• 从 API 加载产品数据
• 包含一个带有子路由的路由器 View ，可有选择地加载选项卡的内容
• 路由器元素有 :product.sync="product"将数据传递到路由器 View

<ProductOverview>

• 由路由器 View 加载的选项卡之一
• 从路由器接收数据以供使用。
• 可以处理产品数据，直接在此文件的模板中显示数据。
• 包含<ProductFeatureList>

<ProductFeatureList>

• 还有:product.sync="product" ，应该从父级 <ProductOverview> 获取数据
• 改为未定义。

代码

路由器

export default new Router({
  routes: [
    {
      path: '/product/:max_id',
      name: 'ProductEdit',
      component: ProductEdit,
      children: [
        {
          alias: '',
          path: 'overview',
          name: 'ProductOverview',
          component: ProductOverview,
          props: true
        },
       ...
      ]
    ...
    }
  ]
})

产品编辑

export default {
  name: 'ProductEdit',
  data: () => ({
    product: {},
    productLoaded: false
  }),
  created: function () {
    Vue.axios.get('http://api.local/products/' + this.$route.params.id).then((response) => {
      this.product = response.data.data
      // Verify if the product is actually loaded properly
      if ('id' in this.product) {
        this.productLoaded = true
      }
    })
  }
}

产品概述

export default {
  name: 'ProductOverview',
  components: {ProductFeatureList},
  props: ['product'],
  data: () => ({
    props: {
      product: {
        type: Object
      }
    }
  })
}

产品功能列表

export default {
  name: 'ProductFeatureList',
  params: ['product'],
  data: () => ({
    props: {
      product: {
        type: Object
      }
    }
  })
}

所以问题是:为什么<ProductFeatureList>无法从<ProductOverview?获取产品数据？

Answer 1

您的ProductFeatureList没有适当的 props接收传递的数据，因为您正在使用名为 props 的对象data里面函数(这是非常具有误导性的)。

拉props共 data :

产品功能列表

export default {
  name: 'ProductFeatureList',
  params: ['product'],
  props: {
    product: Object
  },
  data: () => ({
    somethingElse: null
  })
}