追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


关于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的理解 « Sass开发注意点 | JavaScript杂记(杂而又杂)»


订阅Rss