「Vue源码学习」你真的知道插槽Slot是怎么“插”的吗

《Vue源码学习》你真的知道插槽是怎么“插”的吗？导出，这是它在Vue文档中所说的。具体来说，插槽是一个“空间”，允许您在组件中添加内容。你真的知道插槽是如何“插入”的吗？希望你能像我一样，诚实、简单地阅读这篇文章。vueslotslot的基本使用是单槽|匿名槽//子组件：（假设命名为：child）//父组件：（引用子组件child）我们知道如果在中添加内容“林三鑫”，文本“林三鑫”就会不会呈现在页面上。那么我们如何让添加的内容可显示呢？只需在子组件中添加一个插槽即可。//子组件：（假设名称：child）编译作用域（父组件在子组件Insertdata)上面我们了解到，slot其实就是一个‘空间’，可以让我们在父组件中给子组件添加内容。我们可以在父组件中添加任意数据值，比如这样：//父组件：(引用子组件child)newVue({el:'.app',data:{parent:'parentcomponent'}})usingdata的语法完全没变，但是我们是不是可以直接在子组件？？很明显不是！！//子组件：（假设名称：child）newVue({el:'child',data:{child:'childcomponent'}})//父组件：（引用子组件child）不允许将数据直接传递到子组件中。因为：父模板中的所有内容都是在父范围内编译的；子模板中的所有内容都在子范围内编译。备份内容（子组件设置默认值）所谓备份内容，其实就是slot的默认值。有时候我没有在父组件中添加内容，那么slot会显示默认值，比如：//子组件:(Assumedname:child)命名槽（多个子组件对应插入的内容）有时候，子组件中可能有多个槽，那么我们如何将父组件中的相应内容精确地插入到想要的位置？给slot起个名字就可以了，也就是加上name属性。//子组件：(假定名称：child)父组件传递，或者slot="name"（旧语法），v-slot:nameor#name（新语法）添加内容：//父组件：（引用子组件child）这是插入到第二个槽位的内容这是插入到第三slot的内容