静态地将数组传递给Vue组件

Question

我需要静态地将一个数组传递给我的名为ajax-table的Vue组件。我似乎找不到一种方法，所以我想出了这个：

<ajax-table
    header-names="Code, Name, Description, Type"
    field-names="code, name, description, major_type">
</ajax-table>

在组件内部，我这样做：

export default {

    props: [
        'headerNames',
        'fieldNames'
    ],

    data: function () {

        return {
            columnHeaders: [],
            columnFields: []
        }
    },

    created() {
        this.columnHeaders = this.headerNames.split(",").map(x => x.trim());
        this.columnFields = this.fieldNames.split(",").map(x => x.trim());
    }
}

现在，columnHeaders和columnFields包含了我静态传递给组件的header-names和field-names。

我的问题是:有没有更好的方法？

Answer 1

您应该能够使用v-bind:指令或缩写:将数组直接传递给props：

<ajax-table
    :header-names="['Code', 'Name', 'Description', 'Type']"
    :field-names="['code', 'name', 'description', 'major_type']">
</ajax-table>

现在道具headerNames和fieldNames是数组，您可以在组件中使用它们。