• 技术文章 >web前端 >Vue.js

    一文解析Vue中的插槽(slot)

    青灯夜游青灯夜游2022-05-12 11:11:29转载370
    本篇文章带大家深入了解一下vue中的插槽(slot),带你玩转Vue插槽,希望对大家有所帮助!

    在 Vue 中,插槽是个很强大的功能,它可以使封装的组件灵活性增强很多,比如你在封装一个组件时使用了插槽,那在父组件调用时,这里的内容就可以由父组件自由定义,而无需在封装组件时苦想如何覆盖各种使用场景。(学习视频分享:vue视频教程

    基础插槽

    假设我们现在有一个需要封装的组件 SlotComponent

    <template>
      <div>这是一个slot:<slot> </slot></div>
    </template>
    <SlotComponent>来自父组件的内容</SlotComponent>

    slot 中的内容就可以在父组件中任意定义。要是组件中没有<slot>元素,那么在父组件调用时,组件起始和结束标签之间的内容就都会丢失掉。

    既然 slot 是在 SlotComponent组件中的,那在父组件中调用的时候能否能使用 SlotComponent 组件里的数据呢 ? 显然是不能的,因为他们所处的作用域并不相同。

    父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

    插槽的默认内容

    插槽也可以设置默认的内容,这有点像 es6 中函数参数的默认值,当父组件调用时并没有提供内容,那么这个默认值就会被渲染出来。提供了内容的话,则会替代默认内容。

    <template>
      <div>
        <slot>这是slot的默认内容</slot>
      </div>
    </template>
    <DefaultSlot></DefaultSlot>

    在调用时标签之间并没有提供内容,默认值得以渲染,成为一个兜底内容。

    1.png

    具名插槽

    如果在组件中我需要多个地方用到插槽,那就需要给 slot 添加 name,来区分内容渲染到什么地方。

    // named slot,名字叫 NamedSlot
    <template>
      <div>
        这是具名插槽
        <div>
          <slot name="slot1"></slot>
        </div>
        <div>
          <slot name="slot2"></slot>
        </div>
        <div>
          <slot name="slot3"></slot>
        </div>
      </div>
    </template>
    
    // 在父组件中调用
    <NamedSlot>
        <template v-slot:slot1>这是插入slot1的内容</template>
        <template v-slot:slot2>这是插入slot2的内容</template>
        <template v-slot:slot3>这是插入slot3的内容</template>
    </NamedSlot>

    slot 加上 name 属性后,可以通过 v-slot:slotName的形式分发内容。不给 name 属性的话,就默认namedefault,等同于 v-slot:default,也可以缩写为#default

    注意, v-slot 只能添加在 <template> ,但是也有特殊情况,后面会讲到。

    插槽如何访问子组件内容

    通过 slot,我们可以在父组件为子组件添加内容,但是父子组件的作用域是不同的,我们想在父组件使用子组件的数据该怎么办呢?

    可以在子组件 <slot> 元素上绑定属性,值为你需要传递给父组件的内容。

    // 子组件 组件名称为 SlotProp
    <div>
        <slot name="slot1" :value1="child1"></slot>
        <slot name="slot2" :value2="child2"></slot>
    </div>
    //调用
    <SlotProp>
      <template v-slot:slot1="slotProps">
        {{ slotProps.value1 }}
      </template>
      <template v-slot:slot2="slotProps">
        {{ slotProps.value2 }}
      </template>
    </SlotProp>

    简单来说,就是在 slot 上通过 :key='value'的形式绑定一个值,

    在父组件调用时,通过v-slot:slotName="slotProps"的形式拿到这个值,slotProps名称可以自己定义,

    再通过 slotProps[key] 去拿到这个值。

    如果组件只有一个默认模版的话,是可以不用在 template 上写 v-slot:slotName="slotProps"的,可以直接在组件名称上写 v-slot

    <SlotProp v-slot:default="slotProps">
        {{ slotProps.value1 }}
    </SlotProp>

    上面提到过,未指定 name 就会被认为是 default ,这里也是同理,v-slot:default="slotProps"可以简写成 v-slot="slotProps"

    slotProps 的解构

    作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

    基于插槽的实现原理,我们也可以使用一些 ES6 的语法来操作 slotProps,比如解构prop重命名赋默认值等。

    // 解构
    <SlotProp v-slot="{ value1 }">
        {{ value1 }}
    </SlotProp>
    
    // 重命名,将 value1 重命名为 name1
    <SlotProp v-slot="{ value1: name1 }">
        {{ name1 }}
    </SlotProp>
    
    // 赋默认值
    <SlotProp v-slot="{ value1 = '这是默认值' }">
        {{ value1 }}
    </SlotProp>

    动态插槽名

    slot 支持通过 <template v-slot:[dynamicSlotName]>这样的方式来实现动态插槽。

    有时在一个基础组件中循环了插入了多个 slot ,比如这样

    <div v-for="item in slotList" :key="item">
          <slot :name="item"></slot>
    </div>

    在调用的时候就可以使用动态插槽名 + 循环来动态渲染相应的 slot

    <template
      v-for="item in slotList"
      v-slot:[item]
    >
        {{item}}
    </template>

    (学习视频分享:web前端开发编程基础视频

    以上就是一文解析Vue中的插槽(slot)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue vue.js vue3
    上一篇:聊聊Vue.slot原理,起探究下slot 是怎么实现的! 下一篇:聊聊Vue3 style中新增了哪些特性(汇总)
    千万级数据并发解决方案

    相关文章推荐

    • 为什么用vue的反向代理• 深入浅析vue3+vite中怎么使用svg图标• 收藏这些vue项目性能优化方式,总有一天能用上!• 5 款适合国内使用的 Vue 移动端 UI 组件库• 一文了解Vue3中的watchEffect,聊聊其应用场景!• 通过9个Vue3 组件库,看看聊前端的流行趋势!
    1/1

    PHP中文网