简而言之, 作用域插槽就是让插槽内容能够访问子组件中的数据.
案例如下: 有 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>
来源: http://www.bubuko.com/infodetail-3296924.html