普通插槽

是什么

solt是Vue的一个特性-插槽

它允许你像这样合成组件：

1
2
3

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

1
2
3

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

每个solt需要分配一个name值，默认name值为default

普通solt

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>