插槽-slot

作者: Gema玩家 | 来源:发表于2021-06-10 23:32 被阅读0次
  1. 组件的插槽:

(1)组件的插槽是为了让我们封装的组件更加具有扩展性;

(2)让使用者可以决定组件内部的一些内容到底展示什么。

  1. 例子

(1)移动开发中,几乎每个页面都有导航栏

(2)导航栏我们必须封装成一个插件,比如nav-bar组件,

(3)一但有了这个组件,我们可以在多个页面中复用了。

  1. 如何封装这类组件?Slot

(1)抽取共性,保留不同

(2)共性抽取到组件中,将不同暴露为插槽

(3)是搜索框,还是文字,还是菜单,由调用者自己来决定。

组件cpn里定义了一个slot,在调用cpn时,我们通过传递不同的参数来决定slot显示不同的内容;

最终显示内容:

也可以给slot默认的参数:

在调用cpn组件时,如果没有写参数,就是默认的。

如果写了,那就是自己写的参数。如上结果为:


注意:如果调用cpn时定义了多个值,则多个值都会被替换了。

相关文章

  • 插槽

    默认插槽: 具名插槽:slot name='footer' 作用域插槽:v-slot===slot-scope 默...

  • 2-6 vue 匿名插槽-slot

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

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • 插槽

    插槽的基础使用,

  • 插槽slot

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

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

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

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • 在vue中使用插槽

    slot 插槽

  • vue slot插槽

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

  • vue插槽slot详解

    插槽分类:具名插槽与作用域插槽。在新版中(2.6.0)统一都叫v-slot指令,老版中称之为slot与slot-s...

网友评论

    本文标题:插槽-slot

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