vue中有时让插槽内容可能拜访子组件中才有的数据是很有用的。例如,构想一个带有如下模板的 <current-user>组件:
<span> <slot>{{ user.lastName }}</slot></span>
咱们可能想换掉备用内容,用名而非姓来显示。如下:
<current-user> {{ user.firstName }}</current-user>
然而上述代码不会失常工作,因为只有 <current-user> 组件能够拜访到 user,而咱们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容中可用,咱们能够将 user 作为 <slot> 元素的一个 attribute 绑定下来:
<span> <slot v-bind:user="user"> {{ user.lastName }} </slot></span>
绑定在 <slot> 元素上的 attribute 被称为插槽 prop。当初在父级作用域中,咱们能够应用带值的 v-slot 来定义咱们提供的插槽 prop 的名字:
(注:这里不肯定必须叫slotProps,也能够随便定义为你想叫的名字)
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template></current-user>