vue插槽

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 效果