Question

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

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.home, menu);

    MenuItem getItem = menu.findItem(R.id.action_addcart);
    if (getItem != null) {
        cartCounterActionView = (CartCounterActionView) getItem.getActionView();
        cartCounterActionView.setCount(new Database(this).getCountCart(Common.currentUser.getPhone()));
        //Set a ClickListener, the text,
        //the background color or something like that
        cartCounterActionView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
                tx.replace(R.id.frame, new Cart());
                tx.commit();
            }
        });
    }

    return true;
}

此代码段上方没有“ 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>

所以我不知道要在哪里搜索“物品”以及它来自何处。

Answer 1

item是传递到items组件中插槽v-data-table的一条数据，以便在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语法

1 个答案: