带有打字稿的vue3组件子属性

Question

此子属性转移不起作用。

<ProductItemView :productItem="productItem"/>

子组件代码为：

<h4>{{ productItem.title }}</h4>

import { Vue } from 'vue-class-component';
import { ProductItem } from '../../store/types/productitem';
    
export default class ProductItemView extends Vue {
  productItem: ProductItem = {
    id: 0,
    title: '',
    description: '',
    product_type: '',
    image_tag: '',
    created_at: 2000,
    owner: '',
    owner_photo: '',
    email: '',
    price: 0.0
  }
}

不幸的是，该属性不是从这个父组件设置的。

<template>
  <div class="container is-fluid">
    <div class="tile is-ancestor">
      <div class="tile is-parent" v-for="productItem in productItems" :key="productItem.id">
      <ProductItemView :productItem="productItem"/>
      </div>
    </div>
  </div>
</template>

我做错了什么？ productItem 是子组件的属性。我用:productItem从父组件调用它。

Answer 1

productItem 被声明为一个本地数据变量，它不作为公共属性公开。因此，组件模板仅引用本地数据变量，因此它显示默认值 productItem.title（一个空字符串）。

您可以将其移至props 下的@Options：

import { PropType } from 'vue';
import { Vue, Options } from 'vue-class-component';

@Options({
  props: {
    productItem: {
      type: Object as PropType<ProductItem>,
      default: () => ({
        id: 0,
        title: '',
        description: '',
        product_type: '',
        image_tag: '',
        created_at: 2000,
        owner: '',
        owner_photo: '',
        email: '',
        price: 0.0
      })
    }
  }
})
export default class ProductItemView extends Vue {
}

或者使用@Prop from vue-property-decorator（使用rc版本（10.x）来支持Vue 3）：

import { Prop } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';

export default class ProductItemView extends Vue {
  @Prop({ default: {
    id: 0,
    title: '',
    description: '',
    product_type: '',
    image_tag: '',
    created_at: 2000,
    owner: '',
    owner_photo: '',
    email: '',
    price: 0.0
  }})
  productItem!: ProductItem
}