Vue学习（5）-插槽slot

插槽就是子组件预留给父组件放置内容的空间，如果没有插槽，那么我们在父组件中使用子组件时，往子组件里添加内容是无效的。
父组件：

那么有什么办法可以让子组件标签像div一样可以在里面放置内容吗？当然是有的，就是 我们要介绍的插槽slot。

slot

如果我们在子组件中添加插槽，那么放入子组件标签中的内容就会被加载到slot中。
子组件：

这样父组件中添加的内容将会替换掉slot，相当于
子组件：

    
这是子组件
    
    这里是父组件DOM

每一个子组件都应该有一个像这样不带名字的插槽，称为单个插槽。
同时我们也可以增加一些带有名字的插槽，控制DOM内容的不同位置，带有name属性的插槽称为具名插槽。
子组件

父组件中要添加slot属性：

不管父组件中增加的DOM先后顺序如何，具名插槽总是对应到同名的子组件位置处，剩下的对应到单个插槽处。如果在父组件中给了slot属性，但是子组件中并没有该插槽，那么那个标签将不会显示。

slot-scope

这个属性是给父组件中插入在子组件标签中的DOM使用的，可以获取插槽上的属性值。
父组件

子组件：

父组件中slot-scope绑定的scope对应的数据就是子组件中slot上的data。