vueslot（插槽）详解

最近有人问我知不知道vueslot（插槽），发现好像很少用到。所以我整理了slot的一些用法。slot（父组件在子组件处插入内容）Vue实现了一套内容分发API，使用元素作为承载分发内容的出口，vue上有说明文档。具体来说，插槽是一个“空间”，允许您在组件中添加内容。例如：子组件：（假定名称：ebutton）父组件：（引用子组件ebutton）我们知道如果在父组件中直接给添加内容是不会渲染的在页面上。那么我们如何让添加的内容可显示呢？只需在子组件中添加一个插槽即可。子组件：（假设名称：ebutton）子组件可以在任意位置添加槽位，该位置为父组件添加内容的显示位置。编译作用域（父组件在子组件处插入数据）上面我们了解到，slot实际上是一个‘空间’，允许我们在父组件中给子组件添加内容。我们可以在父组件中添加任意数据值，比如这样：父组件：(引用子组件ebutton)newVue({el:'.app',data:{parent:'parentcomponent'}})使用数据的语法完全没变，但是我们能不能直接在子组件中使用数据呢？很明显不是！！子组件：（假定名称：ebutton）newVue({el:'.button',data:{child:'childcomponent'}})parentcomponent:(referencechildcomponentebutton)不能将数据直接传递到子组件中。因为：父模板中的所有内容都是在父范围内编译的；子模板中的所有内容都在子范围内编译。后备内容（子组件设置默认值）所谓后备内容，其实就是slot的默认值。有时我不在父组件中添加内容，那么slot会显示默认值，如：//子组件：(假设名称：ebutton)命名的insertSlots（子组件中的多个对应插入的内容）有时候，子组件中可能会有多个槽位，那么我们如何在父组件中准确的放置想要的内容呢？位置，插入相应的内容？给slot起个名字就可以了，也就是加上name属性。//子组件：（假设名称：ebutton）父组件是通过v-slot添加的：nameContent://父组件:(指子组件ebutton)这是插入二槽的内容这是插入三槽的内容