vuejs中的默认插槽-具名插槽-作用域插槽三者的比较

vuejs中默认槽的比较——命名槽——作用域槽在使用槽的时候，使用槽是非常方便的。一定程度上可以减少模板中大量逻辑判断的使用，控制不能显示的内容，也可以让代码组织结构更加清晰。虽然使用起来简单，但是插件中的一些插槽不太好理解，不是很直观。它允许父组件在子组件的指定位置插入一个html结构。它是自由灵活的，也是组件之间的一种通信方式。有defaultslots,namedslotsandtherearescopedslots当你使用element-ui表单时，虽然你知道如何使用它，表头，内容模板的渲染，你会用到slot，但是它经常非常混乱，因为它在今天是抽象的。起来学习。学完之后，大家在看element-ui表单的时候，希望能给大家带来一些启发。下次再用的时候，你就能更上一层楼了。视频讲解-见b站-defaultslot视频讲解-见b站-namedslot视频讲解-见b站-scopeslotdefaultslot官方文档介绍：Vue实现了一套内容分发API，这套API的设计灵感来自WebComponents规范草案，将元素理解为承载分布式内容的出口并不容易。也就是说，可以作为元素标签的占位符，可以将父组件引用的组件中的html标签内容引入到App组件中，如下例所示。SlotBase.vue组件在写SlotBase.vue组件时，引入slot标签，如下图.wrap{display:flex;证明内容：居中；}.list{宽度：400px；高度：200px；边框：1px纯红色；margin-right:10px;}子组件中的标签为槽位，替换父组件中的

默认内容

如果插入html模板父组件的自定义标签，并且不在子组件中使用槽，则在父组件中插入的标签内容不会被插入。现在你知道插槽是什么了吧，你可以在component标签中定义需要的内容。通过插槽在组件内部添加到组件中的元素就像一个入口，即所谓的插槽，它提供了内容的入口，也决定了内容的位置。component标签中定义的内容，通过这个“入口”可以添加到组件里面的“插件”槽中，就是component标签中的内容。插槽中的“插槽”是组件中的元素。当没有元素时，组件标签中的内容将不会被渲染。当是defaultslot时，我们可以用template标签把它包起来，在上面加上v-slot:default属性，代表默认slot

defaultcontent

命名插件如果想把不合理的内容放到不合理的位置，那么默认槽是做不到的。顾名思义，命名slot就是给slot定义一个名称，让每一个不合理的模板对应不合理的名称。在组件中插入的模板属性中添加v-slot:槽名，在子组件中添加name属性。需要注意的是，name的值需要和v-slot的值保持一一对应，否则达不到我们预期的效果，如下面的示例代码所示：App父组件

我是直播卖酒-content

我是直播打赏-content