写在前面的话:插槽也是一种实现父子组件传值的方式
匿名插槽、具名插槽 - 父传子
作用域插槽 - 子传父
一、匿名插槽
封装组件时,考虑到组件复用性,不同的页面需要显示不同的内容,此时,通常的解法就是使用 v-if 或者 v-show 进行条件渲染,但是如果使用插槽,也会是一种更加高端的解法,因为它可以避免让编码人员使用大量的条件渲染;
1、使用条件渲染
2、使用插槽
使用组件时
组件内部
二、具名插槽
当使用组件时,如果传入过多的DOM结构,且DOM结构有特定位置的需求,此时需要使用具名插槽;
使用组件时
组件内部
特殊用法
等价于(使用template可以减少一层DOM标签的使用)
三、作用域插槽
当组件渲染的数据相同,但是渲染的结构(UI)不同时,可以使用v-if 或者 v-show 进行条件渲染,但是如果使用作用域插槽,让组件的使用者随心所欲的决定展示的DOM结构,这样的做法将会是更加的高明
- 使用条件渲染
- 使用作用域插槽
使用组件时
组件内部