vue.js - Vue 中包装内容的插槽

问题描述

想象一下，您有一个用户列表组件UserList，它在可滚动视图中显示用户。每个用户的详细信息都用UserDetails组件包裹的Card组件表示。

用户列表

<template>
  <Card>
    <UserDetails />
  </Card>
  <Card>
    <UserDetails />
  </Card>
  ...
</template>

现在假设您正在使用这个UserList组件并且想要重新实现包装器UserDetails而不修改它的内容。

添加一个插槽可以替换包装器，但包装器内的所有内容也需要重新实现。

如果我们可以像这样编写 Vue，那就太好了：

用户列表

<template>
  <slot name="wrapper">
    <Card>
      <template #content>
        <UserDetails />
      </template>
    </Card>
  </slot>
  ...
</template>

消耗组件：

<UserList>
  <template #wrapper>
    ...
    <NewImplementation>
      <slot :name="content" />
    </NewImplementation>
  </template>
</UserList>

它可以通过以我们习惯的“反向”方式使用插槽来工作。

这不是有效的语法，但我敢打赌其他人已经考虑过同样的问题。需要用插槽替换一些内容，但不是全部。

Wrapper 组件可以作为属性给出，但我认为这不是正确的解决方案，因为我们有插槽可以避免这样做。

有什么好的解决办法吗？

标签： vue.jsvuejs2

vue.js - Vue 中包装内容的插槽

问题描述

解决方案

推荐阅读