Vue2slot插槽（理解与应用）

news2024/9/19 11:00:03

1、插槽的概念

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

举个例子：组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。
我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）
如图：

2、特性

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，
适用于 父组件 ===> 子组件
应用场景：自定义的表格组件，允许用户传入自定义的结构 + 数据（从插槽中回传的）

3、插槽的类型

分为三大类：默认插槽、具名插槽、作用域插槽

3.1 默认插槽

默认插槽是最基础、最常见的插槽类型。只需在组件模板中简单地使用标签即可定义

示例：
在父级模板中使用该组件时，对应位置的内容会被插入到默认插槽处：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <p>这是插入到子组件中的内容</p>
    </ChildComponent>
  </div>
</template>


<template>
  <div>
    <h2>子组件</h2>
    <!-- 这里是插槽 -->
    <slot></slot>
  </div>
</template>

3.2 具名插槽

允许组件拥有多个可替换内容区域，每个区域都有自己的名称。可以通过给 <slot> 元素添加 name 属性来创建具名插槽，然后在父组件中使用 <slot name="slotName"> 来引用具名插槽。

示例：
在父级模板中，使用v-slot指令（或简写为#）指定插槽名，将内容分配到相应的具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>

子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

3.2 作用域插槽

作用域插槽允许子组件将数据传递到父组件中的插槽内容中，使得父组件可以使用子组件中的数据进行渲染。
作用域插槽通过 <slot> 元素的 name 属性以及 <template slot-scope="props"> 来实现。
scope用于父组件往子组件插槽放的html结构接收子组件的数据

示例：

父组件中：
        <Category>
            <template scope="scopeData">
                <!-- 生成的是ul列表 -->
                <ul>
                  <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                </ul>
            </template>
        </Category>

        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </template>
        </Category>

子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>