Vue.js 组件模板中的 v-for 语法

Question

Vue.js 组件模板中以下代码中的 "props.item" 是什么？

  <div class="expand" v-if="expand">
    <v-progress-linear :indeterminate="true"
                       height="5"
                       v-if="testTable.length === 0" />
    <v-data-table v-else-if="tableHeaders"
                  :headers="tableHeaders"
                  :items="testTable"
                  hide-actions>
      <template slot="items" slot-scope="props">
        <td v-for="(field, key) in props.item" :key="key">{{ field }}</td>
      </template>
    </v-data-table>

此代码段上方没有 "item" 的定义。组件的props定义如下：

props: {
  testData: {
    type: Object,
    required: true,
  },
},

所以我不知道在哪里搜索 'item' 以及它来自哪里。

Answer 1

item是在v-data-table组件中传递给slotitems的一段数据，这样在v-data-table时父组件就可以访问了使用组件；即在 v-data-table 中有一个插槽定义为：

<slot name="items" :item="..."></slot>
//                  ^^^^  and this is where the item comes from

您可以阅读有关 scoped slots here 的更多信息。

Vue.js 组件模板中的 v-for 语法

v-for syntax in a Vue.js component template

vue.js