使用Typescript和类组件装饰器时如何将数组传递给Vue中的道具

Question

我似乎无法找出使用 Typescript 和类组件库将数组作为道具传递给 Vue 组件的正确方法。按照官方模板，我尝试执行以下操作：

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';

const AppProps = Vue.extend({
    props: {
        propsMessage: String,
    },
});

@Component({})
export default class Table extends AppProps {
    mounted() {
        console.log(this.propsMessage);
    }
}
</script>

将其包含在一些模板中：

<template>
  <Table :propsMessage="['This', 'is', 'Bob']" />
</template>

确实有效，并提供以下输出：

[“这个”，“是”，“鲍勃”]

这是我想要的，但这肯定不是将数组作为道具传递的正确方法？我什至没有定义propsMessageas String[]。做了一些研究，我发现这篇文章提到有一个与此问题相关的错误。此问题已修复，最近才合并。所以，现在应该有一种方法可以做到这一点，但我找不到任何有关如何正确执行此操作的文档。

Answer 1

我认为您现在实际上将参数作为字符串传递，而不是作为字符串数组传递。我现在无法测试此代码，但它可能会将您推向正确的方向。如果您在实施它时遇到问题，请告诉我。

表组件（Table.vue）：

<template>
    <div>
        <h1>This is my table component</h1>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';

    @Component
    export default class Table extends Vue {

        @Prop({ type: Array, required: true })
        propsMessage!: string[];


        constructor()
        {
            super();

            console.log(this.propsMessage);
        }
    }
</script>

加载 table 组件的 Home 组件：

<template>
    <my-table :propsMessage="myArray"></my-table>
</template>

<script lang="ts">

    import Vue from 'vue';
    import Component from 'vue-class-component';
    import Table from 'WHERE-YOUR-TABLE-COMPONENT-IS-LOCATED'

    Vue.component('my-table', Table);

    @Component({
        components: { Table }
    })
    export default class Home extends Vue {

        myArray: Array<string> = [];

        constructor() {
            super();

            this.myArray = ['This', 'is', 'Bob'];
        }
    }
</script>