vue插槽

1.插槽使用
正常渲染子组件时，如果子组件的起始标签和闭合标签内有内容，内容是无法被渲染出来的，如下图：

// Son.vue
<template>
    <div>
        子组件
    </div>
</template>
1
2
3
4
5
6

// Parent.vue
   <Son>
            123123123
    </Son>
1
2
3
4

如果我想要使用Parent.vue中子组件标签里面的内容显示，则需要在Son.vue文件中加入插槽，如下图：

<template>
    <div>
        子组件
        <slot></slot>
    </div>
</template>
1
2
3
4
5
6

2.具名插槽

// Son.vue
<template>
    <div>
        子组件
        <slot name="test"></slot>
    </div>
</template>
1
2
3
4
5
6
7

// Parent.vue
   <Son>
     <template v-slot:test>
           测试
      </template>
   </Son>
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.3 Parent.vue组件获取值

        <Son>
            <template v-slot:test="slotProps">
                测试+{{ slotProps.userInfo.age }}
            </template>
        </Son>
1
2
3
4
5

3.4 效果