slot插槽的使用

1.什么是插槽

插槽，可以理解为在组件中留有一个入口，方便其他组件在使用的时候，添加其他的特有的属性。

 子组件child：
     <div>
     <slot></slot>
     这是子组件
     </div>
 父组件：
     <div>
     <child>
        <template>
            这里的数据会插入到子组件的slot里面
        </template>
     </child>
     </div>

2.编译的作用域

在父组件中，无法使用子组件插槽中的数据，因为父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。

3.默认的插槽内容

 子组件child：
     <div>
     <slot>默认的插槽内容</slot>
     这是子组件
     </div>
 父组件：
     <div>
     <child>
        <template>
            
        </template>
     </child>
     </div>

如果父组件中没有在对应的插槽的位置设置内容，默认就展示插槽中的内容。

4.具名插槽

有可能在一个组件中，需要开放多个入口，那么就需要唯一标识去区分开来，这就需要slot 的name属性来做处理了。

 子组件child：
     <div>
     <slot>默认的插槽内容</slot>
     <slot name="test">这是具名插槽</slot>
     这是子组件
     </div>
 父组件：
     <div>
     <child>
        <template>
            
        </template>
        <template v-slot:test>
        
        </template>
     </child>
     </div>

然后 没有使用name 属性的时候，其实，默认name 是default的。

5.作用域插槽

是将插槽中的作用域传到在使用插槽的组件中，

 子组件child：
     <div>
     <slot :user="user">
     {{user}}</slot>
    
     这是子组件
     </div>
     
     
     data() {
         return {
            user:name
         }
     }
 父组件：
     <div>
     <child>
     v-slot后面跟的是具名插槽的name标识，默认是default
        <template v-slot:default="data">
            {{data.user}}
        </template>
     </div>

6.具名插槽的缩写

替换v-slot: ,即v-slot:test可以用 #test代替。

7.总结

我认为插槽的是使用，可以是对于同一个组件但是，不同的组件进行应用的是时候有不同的内容展示，这种时候可以使用插槽，就比如封装的表格组件，这个组件对操作这块使用插槽留有一个入口，不能的模块在调用的时候，可以实现操作按钮不同，比如A模块，其操作按钮只有修改功能，B模块，其操作按钮有修改和删除功能，使用插槽之后，就可以实现。
这样，其实，也实现了“低耦合，高内聚”的作用。