1.插槽使用
正常渲染子组件时,如果子组件的起始标签和闭合标签内有内容,内容是无法被渲染出来的,如下图:
// Son.vue
<template>
<div>
子组件
</div>
</template>
// Parent.vue
<Son>
123123123
</Son>
如果我想要使用Parent.vue中子组件标签里面的内容显示,则需要在Son.vue文件中加入插槽,如下图:
<template>
<div>
子组件
<slot></slot>
</div>
</template>
2.具名插槽
// Son.vue
<template>
<div>
子组件
<slot name="test"></slot>
</div>
</template>
// Parent.vue
<Son>
<template v-slot:test>
测试
</template>
</Son>
3.获取插槽内的数据
3.1 需求:现在Son.vue组件中有个user变量要在Parent.vue组件中使用,如下
3.2 Son.vue实现方法,插槽上定义变量名称userInfo,把user变量赋值给userInfo 如下 ,
// Son.vue
<template>
<div>
子组件
<slot name="test" :userInfo="user"></slot>
</div>
</template>
<script>
export default {
data(){
return{
user:{
name:'zhangshan',
age:18
}
}
}
}
</script>
3.3 Parent.vue组件获取值
<Son>
<template v-slot:test="slotProps">
测试+{{ slotProps.userInfo.age }}
</template>
</Son>
3.4 效果