vue之slot插槽

slot插槽分为三种：
1、匿名插槽：没有名字的插槽。
2、具名插槽：拥有名字的插槽，在使用的时候父组件可以指定插槽的名称。
3、作用域插槽：可以指定传递的数据。

匿名插槽

例如：
插槽定义：

<template>
  <div>
    <!--匿名插槽的使用-->
    <slot></slot>
  </div>
</template>

<script>
    export default {
        name: "role1"
    }
</script>

<style scoped>

</style>

使用定义好的插槽，一般是在父组件上使用。
例如：

<template>
  <div>
    <role1>匿名插槽</role1>
    <role1>
      <div>sfhds</div>
      <div>sjfdjsfd</div>
    </role1>

    <hr/>
  </div>
</template>

<script>
    import Role1 from "../../components/role1";

    export default {
        name: "RoleManager",
        components: {Role1}
    }
</script>

<style scoped>

</style>

效果图：

具名插槽

具名插槽定义：

<template>
  <div class="container">
    <header>
      <h1>
        <slot name="first"></slot>
      </h1>
    </header>

    <main>
      <h2>
        <slot></slot>
      </h2>

    </main>

    <footer>
      <h3>
        <slot name="third"></slot>
      </h3>
    </footer>
  </div>
</template>

<script>
    export default {
        name: "role2"
    }
</script>

<style scoped>

</style>

具名插槽的使用：

<template>
  <div>
    <role2>
      <template slot="first">
        <p>这是具名插槽first</p>
      </template>

      <template>
        <p>这是具名插槽second</p>
        <p>这是具名插槽second</p>
      </template>

      <template slot="third">
        <p>这是具名插槽third</p>
        <p>这是具名插槽third</p>
      </template>
    </role2>
  </div>
</template>

<script>
    import Role2 from "../../components/role2";

    export default {
        name: "RoleManager",
        components: {Role2}
    }
</script>

<style scoped>

</style>

效果图：
左边是效果，右边是对应的html结构。

作用域插槽

作用域插槽的定义：
SlotScopeDemo.vue

<template>
  <div>
    <li v-for="item in list" :key="item.id">
    // info供父组件slot-scope使用的自定义的属性。
      <slot :info="item"></slot>
    </li>
  </div>
</template>

<script>
    export default {
        name: "slot-scope-demo",
        //接受父组件的值
        props: {
            list: {
                type: Array,
                required: true
            }
        },
    }
</script>

<style scoped>
</style>

作用域插槽的使用：
RoleManager.vue

<template>
  <div>
    <h1>作用域插槽</h1>
    <slot-scope-demo :list="userList">
    
    //slot-scope用于接收插件<slot>标签中定义的属性，data名称可以随便写
      <template slot-scope="data">
      //info是作用域插槽定义中<solt>标签中自定义的属性
        <strong v-if="data.info.id==3" style="font-size: 30px;">
          {{data.info.id}}、
          {{data.info.name}}、
          {{data.info.sex}}
        </strong>
        <strong v-else>
          {{data.info.id}}、
          {{data.info.name}}、
          {{data.info.sex}}
        </strong>
      </template>
    </slot-scope-demo>

  </div>
</template>

<script>
    import SlotScopeDemo from "../../components/SlotScopeDemo";
    export default {
        name: "RoleManager",
        components: {SlotScopeDemo, Role2},
        data(){
            return{
                userList:[
                    {
                        id:1,
                        name:"张三",
                        sex:"男"
                    },
                    {
                        id:2,
                        name:"李四",
                        sex:"男"
                    },
                    {
                        id:3,
                        name:"刘燕",
                        sex:"女"
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

效果图：

注意:
　插槽的定义一般是在子组件中，插槽的使用在父组件中。