美文网首页
vue-组件化-插槽(slot)

vue-组件化-插槽(slot)

作者: IT_梅 | 来源:发表于2020-03-03 13:32 被阅读0次

理解

Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如:

  1. 导航栏组件中,右上角的分享按钮,左上角做菜单按钮
  2. 弹出框组件中,弹出框的提示内容等
  3. ...

在这种场景下,把保留给使用者的部分,叫做插槽(slot)

插槽分类

匿名插槽

理解:

  1. 所谓匿名插槽,就是这个插槽里,没有声明任何名称,使用者放进来的东西,都扔进这个插槽中。
  2. 匿名插槽是一种特殊的具名插槽,也就是名为default的插槽

写法:

//自定义组件中
<template>
    <div>
        <slot><slot>//匿名插槽
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent><p>我被放进了插槽中</p></myComponent>
    </div>
</template>

代码中我被放进了插槽中这句话,就进入了自定义组件的匿名插槽中,从而变成了

//自定义组件中
<template>
    <div>
        <div>
            <p>我被放进了插槽中</p><!-- 匿名插槽中放入了内容 -->
        </div>
    </div>
</template>

具名插槽

理解:所谓具名插槽,就是这个插槽里,这个插槽被命了名,使用者放进来的东西,声明了插槽的名称,会被分发进这个具名插槽中。
写法:使用template标签声明具名插槽名称<template v-slot:插槽名></template>

//自定义组件中
<template>
    <div>
        <div class='slot1'>
            <slot name='slot1'><slot><!-- 名为“slot1”的具名插槽 -->
        </div>
        <div class='slot2'>
            <slot name='slot2'><slot><!-- 名为“slot2”的具名插槽 -->
        </div>
        <slot><slot>//这里是个匿名插槽
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent>
            <template v-slot:slot1>
                <p>名为slot1的具名插槽中</p>
            </template>
            <a>啦啦啦啦德玛西亚</a>
            <template v-slot:slot2>
                <p>名为slot2的具名插槽中</p>
            </template>
            <p>啦啦啦啦德玛西亚</p>
        </myComponent>
    </div>
</template>

代码被分发到对应插槽后的内容

//自定义组件中
<template>
    <div>
        <div class='slot1'>
            <div>
                <p>名为slot1的具名插槽中</p>
            </div>
        </div>
        <div class='slot2'>
            <div>
                <p>名为slot2的具名插槽中</p>
            </div>
        </div>
        <div>
            <a>啦啦啦啦德玛西亚</a>
            <p>啦啦啦啦德玛西亚</p>
        </div>
    </div>
</template>

作用域插槽

理解:一种能够将子组件可用的内容暴露给父组件的插槽。
比如:我们有的时候,需要一些子组件里的东西,做内容拼接,就像一个用户名输入框,我们希望所有的用户名,都跟随一个user_的前缀,此处就可以使用到作用域插槽

//自定义组件中
<template>
    <div>
        <slot :user='username'><slot>//匿名插槽
    </div>
</template>
<script>
    export default {
        data(){
            return {
                username:{
                    prefix:"user_"
                }
            }
        }
    }
</script>

//页面(使用者)使用
<template>
    <div>
        <myComponent v-slot='obj'>
            {{obj.user.prefix}}小寒大人
        </myComponent>
    </div>
</template>

编译后的结果就变成了

<template>
    <div>
        <div>
            user_小寒大人
        </div>
    </div>
</template>

默认值(后备内容)

理解

插槽是拥有默认值功能的,如果对应的slot没有传入内容,则会使用slot的默认值

写法

以匿名参数为例

//自定义组件中
<template>
    <div>
        <slot><p>这里是默认的内容</p></slot>
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent></myComponent>
        <myComponent>替换了</myComponent>
    </div>
</template>

最终表现结果为

<template>
    <div>
        <div>
            <p>这里是默认的内容</p>
        </div>  
        <div>
            替换了
        </div>
    </div>
</template>

动态插槽名

理解

可以使用动态值来定某些内容进入某些具名插槽中

写法

正常的具名插槽为v-slot:插槽名,动态的写法为v-slot:[dynamicSlotName],此写法仅在vue2.6.0后的vue中版本使用

简写插槽名

正常的具名插槽为v-slot:插槽名,简写的写法为#插槽名,此写法仅在vue2.6.0后vue中版本使用

相关文章

  • vue-组件化-插槽(slot)

    理解 Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如: 导航栏组件中,右...

  • Vue01组件化实践-03 插槽 slot

    组件化 slot 插槽 demo github地址:feature/slot 分支 直接上代码体会插槽的使用吧

  • vue slot插槽

    v-slot 插槽的用法: 单个slot内容时: 子组件: 父组件: 多个slot内容时(具名插槽): 子组件: ...

  • 插槽slot

    插槽,占位符slot具名插槽,指定占位符slot、name作用域插槽,子组件占位符向父组件占位符通信。slot、s...

  • vue slot匿名插槽 / 具名插槽 / 作用域插槽

    slot 匿名插槽 slot 具名插槽 应用场景 slot 作用域插槽: 在父组件中可以获得子组件的数据,并在父组...

  • 2-6 vue 匿名插槽-slot

    匿名插槽-slot Slot插槽 —— 实现内容分发 什么是slot?slot的意思是插槽,其目的在于让组件的可扩...

  • slot-scope到底是什么

    插槽slot 插槽,也就是slot 插槽是组件的一块HTML模板 插槽就是要将父组件中的内容渲染到子组件中。就好像...

  • vue-api-内置组件

    component 动态组件 keep-alive 缓存组件 slot 插槽

  • vue 插槽slot向父组件传值

    子组件,里面有slot插槽,并在slot上绑定了text值 父组件通过slot-scope就可以拿到子组件slot...

  • Vue插槽:slot、slot-scope与指令v-slot使用

    不具名插槽 具名插槽 v-slotv-slot在组件中使用slot进行占位时,也是在slot标签内使用name 属...

网友评论

      本文标题:vue-组件化-插槽(slot)

      本文链接:https://www.haomeiwen.com/subject/tyeclhtx.html