vue中使用插槽

写在前面的话：插槽也是一种实现父子组件传值的方式

匿名插槽、具名插槽 - 父传子

作用域插槽 - 子传父

一、匿名插槽

封装组件时，考虑到组件复用性，不同的页面需要显示不同的内容，此时，通常的解法就是使用 v-if 或者 v-show 进行条件渲染，但是如果使用插槽，也会是一种更加高端的解法，因为它可以避免让编码人员使用大量的条件渲染；

1、使用条件渲染

2、使用插槽

使用组件时

组件内部

二、具名插槽

当使用组件时，如果传入过多的DOM结构，且DOM结构有特定位置的需求，此时需要使用具名插槽；

使用组件时

组件内部

 

特殊用法

 

等价于（使用template可以减少一层DOM标签的使用）

 

三、作用域插槽

当组件渲染的数据相同，但是渲染的结构（UI）不同时，可以使用v-if 或者 v-show 进行条件渲染，但是如果使用作用域插槽，让组件的使用者随心所欲的决定展示的DOM结构，这样的做法将会是更加的高明

1. 使用条件渲染
   
2. 使用作用域插槽
   使用组件时
   
   组件内部