关于Vue中的slot的理解 - 蓝蓝设计_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的理解

Powered by sitemap
乐彩网 状元彩票平台 状元彩票官网 吉利彩票导航 桔子彩票开奖 吉利彩票开户 迪士尼彩乐园网址 状元彩票开奖 甘肃快3 博发彩票开户