我可以在一个 Vue 组件内的两个插槽之间传递道具吗？

Question

老实说，我很难抓住插槽。这是我的问题： 我有一个名为 Projects.vue 的组件，我在其中使用 Buefy 创建表格，并将表格包装在模板标签中：

<b-table :data="projects" hoverable>
  <template v-slot="project">
   <b-table-column field="id" label="ID" width="40" numeric>{{ project.row.id }}</b-table-column>
   <b-table-column field="name" label="Name">{{ project.row.name }}</b-table-column>
   <b-table-column field="owner" label="Owner">{{ project.row.owner }}.    </b-table-column>
   <b-table-column label="Action">
    <b-button
      outlined
      class="is-small is-primary"
      @click="(row) => showUsersInProject(project.row)">Project details
    </b-button>
   </b-table-column>
  </template>
</b-table>

这只是呈现一个包含项目详细信息的表格，例如项目名称、所有者、ID 和“项目详细信息”按钮。单击按钮Project Details 后，我会渲染另一个表格以显示该项目中的所有用户：

<b-table :data="usersInProject" hoverable>
<template v-slot="user">
  <b-table-column field="id" label="Id" width="40" numeric>{{ user.row.id }}</b-table-column>
  <b-table-column field="firstname" label="First Name">{{ user.row.firstname }}</b-table-column>
  <b-table-column field="lastname" label="Last Name">{{ user.row.lastname }}</b-table-column>
  <b-table-column field="email" label="Email">{{ user.row.email }}</b-table-column>
  <b-table-column label="Action">
    <b-button 
    :disabled="deletedUsers.includes(user.row.id)"
    outlined class="is-small is-danger" 
    @click="deleteUserFromProject(user.row)">Delete user
    </b-button>
  </b-table-column>
</template>
</b-table>

我的问题是 - 我如何将 projects 道具从 project 模板传递到 user 模板？我需要从第一个表中获取project.row.owner 以显示在第二个表中。

Answer 1

您可以通过作用域插槽公开数据，在您的 Projects.vue 内，您需要像这样创建一个插槽：
<slot :projects="projects"></slot>。
这样做时，您以后可以像这样公开项目：

   <Projects>
            <template v-slot="{ projects }">
              any code you put here has access to projects data property (including user template)
            </template>
   </Projects>