首页

关于Vue中的slot的理解

seo达人

今天在做vue项目的时候,遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时,用他们组件的时候接触过slot,如下图: 







这是element-ui对话框的api,当时我记得我百度过,就是这样写就ok了,当时也没深究。



<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

  <span slot="title">

    我是对话框标题

  </span>

  <!-- 这边写对话框的内容 -->

  <span>我是对话框内容</span>

  <span slot="footer" class="dialog-footer">

    我是对话框footer

  </span>

</el-dialog>

效果是这样:







今天研究了,我就查看了源码:







百度的发现这边有两个概念:



1.单个插槽也叫匿名插槽



slot不带name,如下:



<slot></slot>

一个子组件只有一个匿名插槽,就好比对话框的内容没有被含有slot="xx"属性的标签包裹,那么就会替换掉匿名插槽



2.具名插槽



slot 有name,如下



<slot name='xx'></slot>

具名插槽就可以有多个,就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档