简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据。
案例如下:有CurUser组件
<template> <span> <!-- 在slot 元素上绑定user,让父组件插槽能够访问 --> <slot :user="user"></slot> </span> </template> <script> export default { data() { return { user: { firstName: "张", lastName: "三" } } } } </script> <style scoped> </style>
使用组件
<cur-user>
<!-- 使用slot-scope 或者v-slot 来接收-->
<template slot-scope="scope">
{{scope.user.firstName}} {{scope.user.lastName}}
</template>
</cur-user>