Vue 作用域插槽slot-scope
Posted 胖鹅68
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 作用域插槽slot-scope相关的知识,希望对你有一定的参考价值。
文章目录
一、文章参考
二、应用场景
组件内部需要同时展示 父组件和子组件的数据,重点:父组件的数据紧紧用于展示,不做其他逻辑处理
使用优点
- 子组件如果动态获取数据,不需要传递给子组件
- 父组件的数据也不需要通过传递属性的方式将数据给子组件,减少内部逻辑
三、语法案例
- 定义具名user插槽,然后在插槽slot控件中传递变量 userInfo
<template>
<div class>
<div>
<div>header</div>
</div>
<div>
<div>
<slot name="user" :user="userInfo"></slot>
</div>
</div>
<div>
<div>footer</div>
</div>
</div>
</template>
<script>
export default
data ()
return
userInfo:
name: 'huangbiao',
age: 110,
createTime: new Date().getTime()
</script>
- 使用插槽组件,在具名插槽上定义插槽的作用域变量
slot-scope="slotProps"
<template>
<div class>
<MySlotComp>
<template slot="user" slot-scope="slotProps">
<div>用户名: slotProps.user.name</div>
<div>年龄: slotProps.user.age</div>
<div>创建时间: slotProps.user.createTime</div>
</template>
</MySlotComp>
</div>
</template>
<script>
import MySlotComp from './slot/MySlotComp'
export default
components:
MySlotComp
</script>
- 预览效果
以上是关于Vue 作用域插槽slot-scope的主要内容,如果未能解决你的问题,请参考以下文章
Vue 作用域插槽slot slot-scope v-slot
Vue 作用域插槽slot slot-scope v-slot