vue 中 slot插槽使用方法

什么是插槽？

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

插槽的显示：

插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

插槽分类：

• 默认插槽

<!--子组件child-->
<template>
    <div>
        <h3>我是默认插槽的标题</h3>
        <div style="width: 100px;height: 30px;color: red">
              <slot></slot>

              <!--当父组件有内容时，会替换掉子组件的默认内容-->
              <!--<slot>hello world</slot>-->

             <!--当父组件没有内容时，会显示子组件的默认内容 hello world-->
              <!--<slot>hello world</slot>-->
         </div>
    </div>
</template>

<!--父组件-->
<template>
    <h3>这里是父组件</h3>

   <!--使用组件-->
    <child>
        <template>
            <!--当父组件有内容时，会替换掉子组件的默认内容-->
            <div>我是默认插槽的具体内容</div>

            <!--当父组件没有内容时，会显示子组件的默认内容 hello world-->
            <!-- <div></div>-->
        </template>
    </child>
</template>

<script>
    // 引入子组件
    // 引入进来的组件的名称是刚新建的子组件的child的文件名称
    import child from '../views/child'

    export default {
        name: "slot1",
        // 注册组件
        components:{ child }
        }
    }
</script>

注意：

1. 当父组件没有内容时，会显示子组件的默认内容;
2. 当父组件有内容时，会替换掉子组件的默认内容;
3. 当子组件没有使用插槽(注释插槽)时，那么父组件就不会有内容显示

默认插槽 当父组件没有内容时，会显示子组件的默认内容 当子组件没有使用插槽(注释插槽)时，那么父组件就不会有内容显示

• 具名插槽(带有名字)
  描述：具名插槽就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

<!--子组件 child-->
<template>
  <div>

      <div class="header">
            <h3>这是页头标题</h3>
            <!--<slot></slot>-->
            <div>
                <slot name="header"></slot>
            </div>
       </div>

      <div class="footer">
            <h3>这是页尾(子组件)</h3>
            <div>
                <slot name="footer"></slot>
            </div>
      </div>

   </div>
</template>

<!--父组件-->
<template>
    <div>
      <h3>这里是父组件</h3>

      <child>
            <!--父组件通过 v-slot:[name] 的方式指定到对应的插槽中-->
            <template v-slot:footer>
                <div>我是页尾的具体内容</div>
            </template>

            <template v-slot:header>
                <div>我是页头的具体内容</div>
            </template>
        </child>
      
    </div>
</templatd>

<script>
    // 引入子组件
    // 引入进来的组件的名称是刚新建的子组件的child的文件名称
    import child from '../views/child'

    export default {
        name: "slot1",
        components:{ child }
        }
    }
</script>

具名插槽(带有名字)

• 作用域插槽(带参数)

<!--子组件child-->
<template>
    <div>
          我是作用域插槽的子组件
         <slot :data="user"></slot>
    </div>
</template>

<script>
    export default {
        name: "child",
        data(){
            return{
                user:
                [
                    {name: 'Jack', sex: 'boy'},
                    {name: 'Jone', sex: 'girl'},
                    {name: 'Tom', sex: 'boy'}
                ]
            }
        }
    }
</script>

<!--父组件-->
<template>
    <div>
        <h3>这里是父组件</h3>

      <child>
         <!--slot-scope属性，user.data就是子组件传过来的值-->
          <template slot-scope="user">
              <div v-for="(item,index) in user.data" :key="index">{{item}}</div>
          </template>
      </child>
    </div>
</template>

<script>
    // 引入子组件
    // 引入进来的组件的名称是刚新建的子组件的child的文件名称
    import child from '../views/child'

    export default {
        name: "slot1",
        components:{ child }
    }
</script>

作用域插槽(带参数)

参考：https://www.cnblogs.com/mandy-dyf/p/11528505.html
https://www.cnblogs.com/loveyt/p/9946450.html