Vue初学-插槽slot

匿名插槽

    
    
    
    


    

      我是插槽的内容
    
    
    

我们使用slot标签在组件中定义插槽，当我们在调用组件的标签内写入内容的时候，这段内容会替换匿名的插槽，slot标签相当于一个占位符。
1.当插槽标签中有内容，而且组件标签内未插入任何数据时，页面会显示插槽标签内的内容，相当于是插槽的默认值。但是如果组件标签内插入了任意数据，页面则会显示组件标签插入的内容。 代码如下：

2.如果有多个匿名插槽，则组件标签内的数据，会插入到所有的匿名插槽中。 代码如下：

3.插槽中不仅可以插入数据，还可以插入模板和html代码。 代码如下：

具名插槽

在slot标签中使用name属性为每一个插槽指定名称，使用v-slot指令来指定数据应该插入的哪一个具名插槽中，需要重点注意的是v-slot这个指令只能写在template标签中。

作用域插槽

• 作用域插槽只能是具名插槽。
• 这里不能再使用v-slot指定数据要插入的具名插槽的名称，而是使用slot属性来指定插槽的名称。
• 使用slot-scope属性来接收绑定到插槽上的数据。
• 在插槽中为属性绑定数据时，属性的名称不能有大写字母，如果属性中有包含了小横线（如上图的user-info），那么在调用的地方需要转换成对应的驼峰命名法（如上图的data.userInfo.name）