Vue2slot插槽(理解与应用)

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>

四、插槽的应用场景

使用插槽的好处: 提高了组件的可复用性和灵活性。

通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理
如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情
通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用 比如布局组件、表格列、下拉选、弹框显示内容等

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值