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>

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

1 个答案: