VUE的作用域插槽
VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据带有如下模板的 <current-user> 组件:<span><slot>{{ user.lastName }}</slot></span>我们可能想换掉备用内容,内容为子组件的 user对象的firstName属性。如下:<current-user>{
·
VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据
带有如下模板的 <current-user>
组件:
<span>
<slot>{{ user.lastName }}</slot>
</span>
我们可能想换掉备用内容,内容为子组件的 user对象的firstName属性。如下:
<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 的名字:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
事实上,我们也可以使用解构来简化
<current-user>
<template v-slot:default="{user}">
{{ user.firstName }}
</template>
</current-user>
更多推荐
已为社区贡献1条内容
所有评论(0)