.box{width:200px;高度：200px；background-color:#baf;}slot技术封装对话框组件前回顾为什么要封装组件（组件开发）组件开发（封装组件）的好处很明显，可以增加代码的可重用性和灵活性，从而提高开发效率。试想一下，如果一个项目中的多个页面都可以使用一个弹出框，如果你在每个页面都写一套弹出框结构样式和相应的js逻辑。在这种情况下，开发效率会大大降低。毕竟现在产品经理提倡敏捷开发（跑快游戏）。组件化开发的理解假设我们封装了一个公共的弹框组件，需要用到的地方引用即可。什么？？？不同页面的弹框有不同的数据？有的是添加数据弹框，有的是修改数据弹框，有的是删除数据弹框。没关系！根据弹出框的文字，传入不同的参数即可。例如，要添加一个弹出框，传入'add'这个词；修改弹框，传入'modify'等字样。什么？？？不同的弹出框略宽一些略高，样式略有不同，没关系，直接用深度范围选择器/deep/设置就好了，什么？？？不同的弹框点击确认按钮，最终的业务逻辑不同，有的增加一条数据，有的删除一条数据等。组件之间的数据传递无所谓，记住event的语法即可相关的触发器。封装组件的一种更常用的技术是插槽。在封装对话框组件之前，我们先来回顾一下槽的相关知识。为什么会有slotslotapi的诞生源于Vue数据传输的需求，因为通常我们使用props从parent向child传输数据，传输的数据是“js类型的数据”，比如对象，数组，和字符串。当我们要传递大量html类型的片段数据时，应该怎么办？有这样的需求，于是槽技术应运而生。在组件化编程中，不需要传递css，因为我们可以使用深度作用域选择器，比如/deep/，在父组件中选择子组件中的dom元素来设置样式槽的分类默认槽（也称为：普通槽、单槽、匿名槽。即没有名字，就不需要设置name属性)Namedslots(withaname,withanameattribute)scopeSlots（这是slots的一个稍微高级的用法，就case而言，它在饿了么UI中的表格中很有用）slots可以在饿了么UI或antD封装的组件中看到，以el-dialog作为例如，它使用默认插槽和命名插槽。可以说，套接字技术基本上用在了UI组件上。有空的话可以去看看饿了么UI封装组件的源码。包/组件很多，找element-ui下的包，都是饿了么打包的componentscopeslots。这篇文章暂时不会用到，先按一下按钮，然后单独写一篇关于功能的文章DomainSlotsArticleAnonymous(default)SlotsUsingSubcomponentsPlaceAnonymousSlots

我是一个子组件