1.2 插槽 ps:(仅供本人记忆)
1.2.1 为什么要使用插槽?
- 当我们使用其子组件时,我们往往都是通过子组件标签来展示子组件内容的。
- 有时我们希望子组件里面能够给我们预留一些空位,以便于父组件填充,这样的子组件则更加灵活。
- 插槽可以使组件更具备扩展性!
- Vue插槽文档
1.2.2 插槽的基本使用
- 在子组件的模板区域中,使用特殊的元素<slot>就可以为子组件开启一个插槽。
- 该slot元素中插入什么内容取决于父组件如何使用。
- 子组件定义的slot元素最终都是被父组件所替换掉的!
- 给子组件定义一个插槽:slot元素
- 父组件在使用子组件时,填充子组件的插槽。在子组件标签中编写的HTML内容,会替换掉子组件的slot元素
- 可以给<slot>中设置默认要展示的内容,如果父组件没有在子组件中插入任何内容,就默认显示该内容
1.2.3 具名插槽的使用
- 有时子组件的插槽slot元素不止一个,且每个插槽用于实现不同的功能。
- 那么当父组件往子组件标签里填充内容时,如何替换指定的slot元素?
- 这时候就要用到具名插槽
- 给子组件中的插槽取一个名字。给插槽solt元素添加一个name属性
- 父组件往子组件标签中填充内容时,可以通过slot属性指定插槽的名字来替换子组件中指定的slot元素。
- vue2.6起更新了具名插槽的用法
- 在向具名插槽提供内容的时候,我们可以在template元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
1.2.4 作用域插槽的使用
- 有时父组件在往子组件标签中填充内容时,需要使用到子组件中的数据来进行展示
- 这个时候就要用到作用域插槽
- 子组件需要在slot元素上绑定一个自定义属性。该自定义属性就是传递给父组件的变量
- 父组件在子组件标签中编写template元素,并为它添加v-slot="slotProps"属性
- 此时子组件传递的变量就存放在slotProps身上了,父组件可以将其展示
1.2.5 插槽封装技巧
- 使用插槽封装一些组件的目的是为了让这个组件更具备扩展性!其组件内填充的东西可以让使用者来定义
- 以封装tab-bar组件为例,下面总结封装该组件的流程
- 先编写好tab-bar组件的相关样式,以及html代码
- 在tab-bar组件中,使用slot元素包裹住我们希望被父组件替换掉的元素
- 父组件使用子组件时可以填充想要的内容
- 注:子组件定义的slot元素最终都是被父组件所替换掉的!!因此要注意类名不能添加到slot元素上。否则替换时,样式就不起效果了!