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

Posted 2023-02-23

【中文标题】带有打字稿的vue3组件子属性

【英文标题】：vue3 component child property with typescript

【发布时间】：2021-08-05 06:37:48

【问题描述】：

此子属性转移不起作用。

<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从父组件调用它。

【参考方案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

【讨论】：

非常感谢。我更喜欢第一个变体。有没有关于这个和更多的文件？

目前仅记录在此GitHub issue。