vue-组件-插槽

一、概要

插槽是指把任意内容插入指定的位置，而这个位置使用``作为占位符
简单的来说就是在组件的某个节点内预留一个位置，当父组件调用该组件的时候可以指定该位置具体的内容子组件内插糟v-slot控制摆放位置

二、分类

**匿名插槽(也叫默认插槽): **
**具名插槽: **相对匿名插槽组件slot标签带name命名的
作用域插槽:子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

三、匿名插槽

1、说明

没有命名,有且只有一个

2、要点

• 子组件声明 <slot></slot>
• 父组件引入组件 ' <child-slot>'

3、栗子

DefaultSlot.vue

<template>
    <div>
        <h1>这里是父组件</h1>
        <!--匿名插槽开始-->
        <child-slot>
            <ul>
                <li>匿名插槽1</li>
                <li>匿名插槽2</li>
                <li>匿名插槽3</li>
                <li>匿名插槽4</li>
            </ul>
        </child-slot>
    </div>
</template>
<script>
    import ChildSlot from "./ChildSlot";
    export default {
        name: "DefaultSlot",
        components: {
            ChildSlot,
        }
    }
</script>

ChildSlot.vue

<template>
    <div>
        <h3>子组件</h3>
        <!-- 替换部分 -->
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: "ChildSlot"
    }
</script>

image

四、具名插槽

1、说明

主要是利用slot的name属性，可以用来定义额外的插槽 ，不带name的'slot'会默认带隐含的名字“default”

2、要点

• 父组件

  <template v-slot="名字">
  </template>
  或者
  <template #名字>
  </template>
  

• 子组件

  <slot name="名字"></slot>
  

3、注意

• v-slot只能添加到template标签上
• v-slot的简写形式#

4、栗子

NameSlot.vue

<template>
    <div>
        <h1>具名插槽</h1>
        <name-child-slot>
            <template #img>
                <span class="iconfont icon-shouye"></span>
            </template>
            <template #name>
                <span>首页</span>
            </template>
        </name-child-slot>
    </div>
</template>
<script>
    import NameChildSlot from "./NameChildSlot";
    export default {
        name: "NameSlot",
        components: {
            NameChildSlot,
        }
    }
</script>

image

五、作用域插槽

1、说明

作用域插槽 比前面的多了一个功能,父组件可以接收到子组件的数据，并且可以对数据进行操作

1、作用

用于将子组件的数据显示到父组件，但样式，由父组件决定。

23、要点

1. template标签
2. slot-scope接收
3. slot定义属性传递值给template

4、应用场景

组件在只有自己的子组件会使用自己提供的数据时，通常出现在遍历渲染时

5、栗子

ScopeChildSlot.vue

<template>
    <div>
        <ul>
            <li v-for="(name,index) in names" :key="index">
                <slot name="up" :item='name'></slot>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                names: ['1号技师', '2号技师', '3号技师']
            }
        },
    }
</script>

image
ScopeParentSlot.vue

<template>
    <div>
        <scope-child-slot>
            <template #up="childData">
                <p v-text="childData.item"></p>
            </template>
        </scope-child-slot>
    </div>
</template>
<script>
    import ScopeChildSlot from "./ScopeChildSlot";
    export default {
        components: {
            ScopeChildSlot,
        },
    }
</script>

image

6、效果图

image