Question

我试图了解这段代码在vuesax VueJS框架（https://pixinvent.com/demo/vuesax-vuejs-admin-dashboard-template/documentation/components/table.html#default）中的含义

<vs-table stripe :data="users">
          <template slot-scope="{data}">
            <vs-tr :key="indextr" v-for="(tr, indextr) in data" >
              <vs-td :data="data[indextr].email">
                {{data[indextr].email}}
              </vs-td>

              <vs-td :data="data[indextr].username">
                {{data[indextr].name}}
              </vs-td>

              <vs-td :data="data[indextr].id">
                {{data[indextr].website}}
              </vs-td>

              <vs-td :data="data[indextr].id">
                {{data[indextr].id}}
              </vs-td>
            </vs-tr>
          </template>
        </vs-table>
...
data() {
  users:[
                    {
                        "id": 1,
                        "owner": "Bruno Francisco",
                        "token": "123XCS456ECS65ED",
                        "description": "To be used in production server",
                        "last_refreshed": "",
                        "created_at": "hildegard.org",
                    }, 
    ], ...
}

我对slot-scope="{data}"更感兴趣。它到底是做什么的？对我来说，这看起来像是一个对象的解构，但是我不确定如何理解这一点。这是在:data行中引用<vs-table stripe :data="users">道具吗？

Answer 1

这是一个变形的scoped slot。

说明：

它们为您提供了一种访问该组件内部使用的data变量的方法（从技术上讲，它是该组件中的datax）。

之所以对其进行重组，是因为它们可以通过该作用域插槽公开多个变量或函数。例如，他们可以做这样的事情：

<template slot-scope="slotProps">
  <button @click="slotProps.someFunction()">{{ slotProps.someLabel }}</button>
  <ul>
    <li v-for="d in slotProps.data"></li>
  </ul>
</template>

但是在这种情况下，它们只是暴露并使用data变量。

在这种情况下，对象解构意味着什么

1 个答案: