先贴上vue官网，熟悉一遍官网地址
vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。
个人理解：插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 简单的说插槽是给父组件填充内容的。
默认插槽
1、子组件：一居室里面的内容
<template>
<!--这是一个一居室-->
<div class="one-bedroom">
<!--添加一个默认插槽，用户可以在外部随意定义这个一居室的内容-->
<h2>这是个一居室：</h2>
<slot></slot>
</div>
</template>
2、父组件：在一居室里面进行装修
<one-bedroom>
<!--将家具放到房间里面，组件内部就是上面提供的默认插槽的空间-->
<div>先放一个小床，反正没有女朋友</div>
<div>再放一个电脑桌，在家还要加班写bug</div>
</one-bedroom>
image.png
总结：如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的
具名插槽
描述：具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
举个栗子：
两居室，所以有了主卧和次卧之分，装修是否也不能把主卧和次卧装修的一模一样，所以就需要进行区分。将房子想想成组件，那么组件就有两个插槽，并且需要起名字进行区分。
1、子组件
<template>
<div class="two-bedroom">
<h2>这里是主卧：</h2>
<div class="master-bedroom">
<!---主卧使用默认插槽-->
<slot></slot>
</div>
<h2>这里是次卧：</h2>
<div class="secondary-bedroom">
<!--次卧使用具名插槽-->
<slot name="secondard"></slot>
</div>
</div>
</template>
2、父组件
<two-bedroom>
<!--主卧使用默认插槽-->
<div>
<div>放一个大床，要结婚了，嘿嘿嘿</div>
<div>放一个衣柜，老婆的衣服太多了</div>
<div>算了，还是放一个电脑桌吧，还要写bug</div>
</div>
<!--次卧，通过v-slot:secondard 可以指定使用哪一个具名插槽， v-slot:secondard 也可以简写为 #secondard-->
<template v-slot:secondard>
<div>
<div>父母要住，放一个硬一点的床，软床对腰不好</div>
<div>放一个衣柜</div>
</div>
</template>
</two-bedroom>
image.png
作用于插槽
描述：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
使用方法:
1、子组件存放一个带数据的插槽
2、父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容
举个栗子：
装修的时候，装修师傅问我洗衣机是要放到卫生间还是阳台，一般情况下开发商会预留放洗衣机的位置。而这个位置可以理解为插槽传的参数，这个就是作用域插槽。
1、子组件：
<template>
<div class="two-bedroom">
<h2>这里是卫生间：</h2>
<div class="toilet">
<!--通过v-bind 可以向外传递参数, 告诉外面卫生间可以放洗衣机-->
<slot name="toilet" v-bind="{ washer: true }"></slot>
</div>
</div>
</template>
2、父组件：
<two-bedroom>
<!--卫生间插槽，通过v-slot="scope"可以获取组件内部通过v-bind传的值-->
<template v-slot:toilet="scope">
<!--判断是否可以放洗衣机-->
<span v-if="scope.washer">这里放洗衣机</span>
</template>
</two-bedroom>
image.png
网友评论