vuejs：如何在相同组件中传递共享道具？

Question

我正在使用来自 Bootstrap Vue 的 table 组件，我想知道是否有一种方法可以避免每次都为此组件编写完全相同的道具。

例如，假设我正在为这样的用户 table 使用该组件：

  <b-table
    id="users-table"
    :busy.sync="isBusy"
    :items="fetchData"
    :fields="fields"
    :current-page="currentPage"
    :per-page="perPage"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :no-local-sorting="true"
    :filter="filter"
    primary-key="id"
    responsive
    small
    show-empty
  >
      <template v-slot:cell(userName)="data">
        // ...
      </template>

      <template v-slot:cell(actions)="data">
         // ...
      </template>
  </b-table>

现在，如果我想使用相同的 b-table 组件但用于产品列表，我将不得不 rewrite/repass 对这个组件使用完全相同的道具：

 <b-table
    id="products-table"
    :busy.sync="isBusy"
    :items="fetchData"
    :fields="fields"
    :current-page="currentPage"
    :per-page="perPage"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :no-local-sorting="true"
    :filter="filter"
    primary-key="id"
    responsive
    small
    show-empty
  >
      <template v-slot:cell(productPrice)="data">
        // ...
      </template>

      <template v-slot:cell(actions)="data">
         // ...
      </template>
  </b-table>

这是非常重复的...

有没有办法做这样的事情？

  <b-table
    id="users-table"
    someObject
  >
      <template v-slot:cell(userName)="data">
        // ...
      </template>

      <template v-slot:cell(actions)="data">
         // ...
      </template>
  </b-table>

其中 someObject 将包含此组件的常用道具？

Answer 1

您可以将对象的属性作为道具传递：

<b-table 
  v-bind="options"
>
  ...
</b-table>

data() {
  return {
    options: {
      filter: filter,
      fields: fields,
      ...
    }
  }
}

结果：

<b-table
  :filter="options.filter"
  :fields="options.fields"
>
  ...
</b-table>

https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

vuejs：如何在相同组件中传递共享道具？

vuejs: How to pass shared props in same components?

vue.js

bootstrap-vue