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

Question

我需要将数组静态传递给名为Vue的{​​{1}}组件。我似乎找不到办法，所以我提出了这个：

ajax-table

在组件内部，我这样做：

<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。

我的问题： 有更好的方法吗？

Answer 1

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

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

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