插槽的使用

1. 插槽和组件的区别

插槽和组件的用法基本相同，主要的区别是父组件可以在插槽中自定义子组件的DOM

2.基本使用

• 子组件child.vue

<template>
    <div>
        <span>今天天气状况：</span>
        <slot>暂无</slot>    <!--“暂无”是当父组件没传值时显示的默认内容-->
    </div>
</template>
<script>
    export default {
        name: 'child'
    }
</script>

• 父组件

<template>
    <div>
        <child>{{type}}</child>
    </div>
</template>

<script>
import child from "./child"
export default {
    name: "slot-x",
    data(){
        return {
            type:"大风"
        }
    },
    components: {
       'child': child
    }
}
</script>

3. 具名插槽

现在组件child中只能插入一条内容，如果想在不同地方插入多条怎么办呢？这时可以使用<slot>元素的name属性

• 子组件child.vue

<template>
    <div>
        <span>今天天气状况：</span>
        <slot name="type"></slot>  
        <slot name="level"></slot>  
    </div>
</template>

• 父组件

<template>
    <div>
        <child>
            <span slot="type">{{type}}</span>
            <span slot="level">八级</span>
        </child>
    </div>
</template>

使用template包裹插槽内容

• 父组件

<template>
    <div>
        <child>
            <template slot="type">
                <span>{{type}}</span>
                <span>小雨</span>
            </template>
            <template slot="level">
                <span>八级</span>
            </template>
        </child>
    </div>
</template>

4. 作用域插槽

作用：让插槽内容能够访问子组件中才有的数据

• 子组件child.vue

<template>
    <div>
        <span>今天天气状况：</span>
        <slot name="level" :level="childLevel"></slot>  
    </div>
</template>
<script>
    export default {
        name: 'child',
        data() {
            return {
                childLevel: "四级"
            }
        }
    }
</script>

• 父组件

<template>
    <div>
        <child>
            <template slot="level" slot-scope="{level}">
                <span>{{level}}</span>
            </template>
        </child>
    </div>
</template>

<script>
import child from "./child"
export default {
    name: "slot-x",
    components: {
       'child': child
    }
}
</script>

注意：v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。