怎么向vue的子组件,传递一个 ts type数据类型

Question

<template>
<ChildrenVue />  // 子组件


</template>
<script lang='ts'>
interface DataType {
  key: string,
  title: string,
}



<script/>

现在我要向子组件ChildrenVue ,传递DataType 这个数据类型怎么操作?

Answer 1

productItem is declared as a local data variable, which is not exposed as a public prop. The component template thus refers only to the local data variable, so it shows the default value of productItem.title (an empty string).

You could either move that to @Options under props:

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 {
}

参考：

vue.js - vue3 component child property with typescript - Stack Overflow https://stackoverflow.com/questions/67545306/vue3-component-child-property-with-typescript