前端培训丁鹿学堂：vue之slot的使用汇总

vue的组件插槽slot

插槽的理解就是子组件用一个标签占位。父组件可以通过插槽向子组件插入dom内容，位置就是插槽标签占位的地方。
写法分两步：
1.在子组件中通过 slot 开一个插槽
2.在父组件中直接插入内容即可替换slot所在的位置。
3.插槽内容可以是标签，也可以是其他的组件。
子组件：

    

        
我是子组件标签
        
    
1
2
3
4

父组件

  
我是父组件插入插槽的内容

1
2
3

vue中插槽的作用域问题

插槽虽然看着是在子组件上显示的，但是插槽的作用域还是属于父组件的。
也就是说，插槽的内容在哪个组件定义，插槽上的事件，数据，都要写在对应的组件里。
插槽的作用域就是定义的组件，跟在哪里显示无关

插槽的默认内容设置

如果定义了插槽，父组件没有给内容，子组件可以定义默认内容。方法就是在slot标签之间写内容

插槽默认内容
1

具名插槽

vue中可以使用多个插槽，多个插槽使用的时候，可以给插槽起名字，做到父子组件插槽内容一一对应。
1.子组件slot添加name
2.父组件插槽内容使用template包裹，v-slot:name 或者简写 #name
子组件

    

        
我是子组件标签
        
        
    
1
2
3
4
5

父组件

  
  

1
2
3
4

作用域插槽

vue的特性，子组件的 slot上面除了name 是名称之外，可以定义别的属性，在父组件中可以获取到。
子组件：设置一个name作为具名插槽，设置一个id传给父组件

 
1

父组件：v-slot:slot1 slot1对应的是子组件的name，后面的slotProps是一个集合，包含了id

  
1