【vue】插槽(slot)

插槽

1. 默认插槽
2. 具名插槽
3. 作用域插槽

1默认插槽

• 数据与结构在父组件
• 插槽在子组件

子组件

...


无插入时默认结构


...

父组件

复用组件
每个被复用的组件有一部分结构或数据不同
从父组件中将不同的数据与结构填充到子组件的插槽中

2具名插槽

• 数据与结构在父组件中
• 插槽在子组件中
• 复用的组件有多个地方不同

子组件

...


默认值1


...


默认值2

父组件

给每个插槽添加 name属性
父组件插入的模板添加 v-slot属性
无指定的模板 默认插入无name属性的插槽

3 作用域插槽

• 结构在父组件
• 数据与插槽在子组件

1. 默认
   子组件

   
   ...
   
   
   无插入时默认结构
   
   
   ...

   父组件

2. 具名
   子组件

   
   ...
   
   
   无插入时默认结构
   
   
   ...
   
   
   无插入时默认结构

   父组件

v-slot:name是对具名插槽的选择
v-slot="obj"是对默认插槽的选择 简写形式
上面两种方法尽量不要同时用，可能会出现选择不明确的错误
v-slot:name="obj" 从具名插槽中接收值，在父组件中接收并编译完成再插入子组件
只要出现多个插槽，尽量使用template中的v-slot

推荐使用template的v-slot 完整的写法
v-slot:default="obj"与 v-slot:other="obj"
不推荐使用 slot="name" 与 slot-scope="obj"