关于Vue中的slot的理解

2019-8-25    释然 前端及开发文章及欣赏

今天在做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>

标签: 关于Vue中的slot的理解

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档