主要是让组件的可扩展性更强,简单点说就是,能够在组件内写其他内容


1.匿名slot使用

//定义组件my-component
<div class="myComponent">
  <slot></slot>
</div>
//使用方法
<my-component>
  <p>我就是slot的替代内容,这里可以放任何标签元素,即使是一长串ul>li列表</p>
</my-component>

2.具名slot使用

//定义组件my-component
<div class="myComponent">
  <slot name="mySlot"></slot>
</div>
//使用方法
<my-component>
  <p slot="mySlot">我就是这个叫mySlot的slot替代内容,这里可以放任何标签元素,即使是一长串ul>li列表,但是我是一个有名字的宝宝,所以你必须给我加上slot="mySlot",不然我就报错给你看!</p>
</my-component>

如果不在有slot的组件里加入任何标签,slot什么都不会显示的。


Logo

前往低代码交流专区

更多推荐