Vue 插槽slot

官方说明： 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

因此普通插槽、具名插槽、作用插槽都用 v-slot

插槽：就是子组件中的提供给父组件传递内容的一个占位符，在子组件中用<slot></slot> 表示，父组件可以在这个引用子组件标签对中填充任何模板代码，如 HTML、组件等

1、普通插槽（即匿名插槽）：只做默认内容方法，可以接收所有未具名组件传递的内容

2.、具名插槽：只接受v-slot定义的相同name名称， 如果没有相同name不接受，不显示页面

3、作用域插槽：只针对普通、匿名插槽，子组件将数据传给父组件，父组件可以经过逻辑处理再分发给子组件渲染

父组件

<template>
    <div class="app">
        <child>
            <p>普通/默认插槽</p>
            <template v-slot:user>
                <p>具名插槽 - user</p>
            </template>
            <template v-slot=“slotProps”>  // v-slot 名称可以自定义
                <p v-for="item in slotProps.slotData" :key="item">{{item}}</p>
                <p>作用域插槽</p>
            </template>
        </child>
    </div>
</template>

<script>
    import Child from './child.vue'
    export defualt {
        components: { Child }
    }
</script>  

子组件

<template>
    <div class="child">
        <slot></slot>   // 页面显示 普通、默认插槽
        <slot name="user"></slot>  // 页面显示 具名插槽 - use
        <slot :slotData="slotData"></slot>  // 作用域插槽 页面显示 1,2，作用域插槽
    </div>
</template>

export default {
  name: "child",
  data() {
    return {
      slotData: ['1', '2']
    };
  }
｝

注：因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的。而作用域插槽，父组件只需要提供一套样式。