vue插槽使用

1.2 插槽      ps:(仅供本人记忆)

1.2.1 为什么要使用插槽？

• 当我们使用其子组件时，我们往往都是通过子组件标签来展示子组件内容的。
  • 有时我们希望子组件里面能够给我们预留一些空位，以便于父组件填充，这样的子组件则更加灵活。
• 插槽可以使组件更具备扩展性！
• Vue插槽文档

1.2.2 插槽的基本使用

• 在子组件的模板区域中，使用特殊的元素<slot>就可以为子组件开启一个插槽。
  • 该slot元素中插入什么内容取决于父组件如何使用。
  • 子组件定义的slot元素最终都是被父组件所替换掉的！

1. 给子组件定义一个插槽：slot元素
2. 父组件在使用子组件时，填充子组件的插槽。在子组件标签中编写的HTML内容，会替换掉子组件的slot元素
3. 可以给<slot>中设置默认要展示的内容，如果父组件没有在子组件中插入任何内容，就默认显示该内容

 

 

1.2.3 具名插槽的使用

• 有时子组件的插槽slot元素不止一个，且每个插槽用于实现不同的功能。
  • 那么当父组件往子组件标签里填充内容时，如何替换指定的slot元素？
  • 这时候就要用到具名插槽

1. 给子组件中的插槽取一个名字。给插槽solt元素添加一个name属性

 

1. 父组件往子组件标签中填充内容时，可以通过slot属性指定插槽的名字来替换子组件中指定的slot元素。

 

• vue2.6起更新了具名插槽的用法
  • 在向具名插槽提供内容的时候，我们可以在template元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
  •  

1.2.4 作用域插槽的使用

• 有时父组件在往子组件标签中填充内容时，需要使用到子组件中的数据来进行展示
  • 这个时候就要用到作用域插槽

1. 子组件需要在slot元素上绑定一个自定义属性。该自定义属性就是传递给父组件的变量
2. 父组件在子组件标签中编写template元素，并为它添加v-slot="slotProps"属性
3. 此时子组件传递的变量就存放在slotProps身上了，父组件可以将其展示

 

 

1.2.5 插槽封装技巧

• 使用插槽封装一些组件的目的是为了让这个组件更具备扩展性！其组件内填充的东西可以让使用者来定义
• 以封装tab-bar组件为例，下面总结封装该组件的流程
  1. 先编写好tab-bar组件的相关样式，以及html代码

 

1. 在tab-bar组件中，使用slot元素包裹住我们希望被父组件替换掉的元素

 

1. 父组件使用子组件时可以填充想要的内容

 

• 注：子组件定义的slot元素最终都是被父组件所替换掉的！！因此要注意类名不能添加到slot元素上。否则替换时，样式就不起效果了！