vue作用域插槽

时间:2021-03-04 18:49:11

  简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据。


案例如下:有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>