Vue插槽，是学习vue中必不可少，这是vue的一个难点但是在很多UI中都有使用比如Element，这需要我们静下心来，慢慢研究。
什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用slot/slot表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的slot/slot标签。
组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力，vue插槽一般有以下几种使用方式，分别是具名插槽和默认插槽，以及作用域插槽
为什么使用插槽
1.首先要明白插槽是使用在子组件中的
子组件中放入插槽2、插槽是为了将父组件中的子组件模板数据正常显示
父组件中的子组件模板3.显示内容
页面显示现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：
子组件中没有放插槽不显示‘有一个注意’也就是说如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html,是没法做到的，这就是为什么要使用插槽
具名插槽的使用
具名插槽其实就是给插槽取个名字。
毕竟默认插槽只能显示一个，但是一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中这就是具名插槽
下面来看看具体用法：
1.子组件里面，设置了三个插槽header和footer以及中间一个main插槽：
子组件里面的插槽位置2.父组件填充内容，父组件通过v-slot:[name]的方式指定到对应的插槽中
父组件里面的模板内容3.页面显示
页面显示接下来再来看看，父组件中填充内容的时候，顺序调换下或者中间main的名字删掉，看下能不能内容能不能对应上位置：
顺序调换下或者中间main的名字改掉父组件没有对应main插槽由此可以看出，即使父组件对插槽的填充的顺序打乱，但只要名字对应上了（名字不能错），就可以正确渲染到对应的插槽中。即：父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的，不在乎顺序
默认插槽的使用
默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父组件将会把未指定名字的插槽填充的内容填充到默认插槽中。
1.子组件代码中定义了一个默认插槽：
子组件代码中放入默认插槽main2.父组件给默认插槽填充内容（内容位置打乱）：
父组件的填充内容打乱看看什么样3.页面显示（在同一个组件里即使内容乱了内容也会全部默认放入默认插槽里）
内容全部默认放入默认插槽里其他默认插槽注意：
1.父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。
2.如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中。
3.如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会”“全都”填充到子组件的每个默认插槽中。
作用域插槽的用法
作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用
父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
1.子组件存放一个带数据list的插槽
子组件提供带数据list的插槽2.父组件通过“v-slot”来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容
通过控制参数让id=3的水果加类名变色3.页面展示
根据插槽数据来填充插槽的内容这样就能实现父组件对子组件加工处理，既可以复用子组件的slot，又可以使slot内容不一致，这就要用到作用域插槽
零基础学JavaScript从入门到精通网页设计书籍淘宝旗舰店￥45.8￥90购买已下架