在 第二十二篇 Vue中父传子 - props 当中我们做了一个场景 ：如下
当时我们是为了基于之前所学的内容进行场景的完成并未使用到这个 v-show ，也是为了内容具有渐进性，先前我们是定义了一个组件，为了更好的实现组件的复用，于是一些在一些场景中我们需要用到【返回】和【首页】按钮，当我在首页的时候就不需要了，所以通过父传子的一个方式传一个值布尔值，确定在被复用的时候需要显示和隐藏，那么本篇内容讲到的是关于插槽的内容；看完本篇内容可以和之前所学的内容进行一个对比学习！那么下面先来讲一下插槽slot:
插槽 - slot 使用
slot 实际上呢也是内置的一个组件，附上地址：插槽 — Vue.js ，先来一个简单的使用：
其一：
如果直接用 <slot> 则会全部显示出来插槽内容；
-
<div id=
"app">
-
<child-one>
-
<!-- 插槽内容 -->
-
<div> 显示全部内容
</div>
-
</child-one>
-
</div>
-
<script>
-
-
Vue.
component(
"childOne",{
-
template:
`
-
<div>
-
<slot></slot>
-
</div>
-
`
-
})
-
-
new
Vue({
-
el:
'#app',
-
data:{}
-
})
-
</script>
其二：
那么我的需求是当中有很多个部分，我在某个组件当中仅需要展示一部分不需要全部；
-
<div id=
"app">
-
<child-one>
-
<!-- 插槽内容 -->
-
<div> 显示全部内容
</div>
-
<!-- 插槽内容 A -->
-
<div slot="A" style="color: red;"> 显示 A 内容
</div>
-
<!-- 插槽内容 B -->
-
<div slot="B" style="color: blue;"> 显示 B 内容
</div>
-
<!-- 其他 -->
-
<div>其他
</div>
-
</child-one>
-
</div>
-
<script>
-
Vue.component("childOne",{
-
template:`
-
<div>
-
<p>【只显示未标slot属性内容】</p>
-
<slot></slot>
-
<hr>
-
<p>【显示A内容】</p>
-
<slot name="A"></slot>
-
<hr>
-
<p>【显示B内容】</p>
-
<slot name="B"></slot>
-
</div>
-
`
-
})
-
-
new Vue({
-
el:'#app'
-
})
-
</script>
通过以上代码及演示图解能够知道slot的一个使用，如果你知道它的使用但不知道可以使用它来做些什么，不要紧，下面通过一个经常出现的应用场景来对 slot 的使用做一个综合案例！
slot - 场景
这个案例在之前我们有提及到类似的，在 第二十二篇 Vue中父传子 - props 中讲到这样一个案例，讲导航栏封装成一个组件，默认的样式是有返回、标题、首页，但在某些情况可以按照我们的需求进行设置，通过父传子的形式，但如果我们的导航栏中比较复杂一下的话，比如有需要用到图标，有时需要图标和文本或者仅需要左边显示右边不显示，亦或者显示两边不显示等等多种需求的话，通过props的方式显然是无法能够满足需求的，那么就需要考虑使用 slot ;
先前完成的案例：
通过 slot 来实现案例：
-
<div id=
"app">
-
<navbar>
-
<!-- 左边 -->
-
<div class="left" slot="left">
-
<img src="/static/模块管理.png" />
-
<button>按钮
</button>
-
</div>
-
<!-- 中间 -->
-
<div class="center" slot="center">
-
<span>标题
</span>
-
</div>
-
<!-- 右边 -->
-
<div class="right" slot="right">
-
<button>按钮
</button>
-
<img src="/static/分享.png" />
-
</div>
-
</navbar>
-
</div>
-
<script>
-
Vue.component("navbar",{
-
template:`
-
<div class="navbar">
-
<slot name="left">
</slot>
-
<slot name="center">
</slot>
-
<slot name="right">
</slot>
-
</div>
-
`
-
})
-
new Vue({
-
el:'#app'
-
})
-
</script>
以上就是需用到的顶部导航栏，那么当我仅需要展示【标题】即刻，只需要这样来修改；
-
Vue.
component(
"navbar",{
-
template:
`
-
<div class="navbar">
-
<slot name="center"></slot>
-
</div>
-
`
-
})
那只使用展示【左边部分】？
-
Vue.
component(
"navbar",{
-
template:
`
-
<div class="navbar">
-
<slot name="left"></slot>
-
</div>
-
`
-
})
【右边部分】呢？
-
Vue.
component(
"navbar",{
-
template:
`
-
<div class="navbar">
-
<slot name="right"></slot>
-
</div>
-
`
-
})
通过以上这个综合案例是不是能够比较清楚的知道 slot 的使用和应用场景，比起之前编写的案例是否复用性更强一些更加的灵活了呢，按需使用哪一部分就来使用哪一部分；插槽当中父组件模板的内容就在父组件作用域当中去编译；子组件模板的内容就在子组件作用域去编译；
综合案例
下面来结合上次完成的抽屉效果进行一个综合案例 ：使用上面的 navbar 组件，并完成下面的效果内容；去掉多余的顶部的设置，仅留下一个放置图标的地方，通过点击后能够出现下面灰色的菜单栏，暂不完成动画效果；
通过之前的几个部分，思路还应该是比较清楚的，修改起来还是非常简单的，只需要用到 slot="left" 的部分，讲按钮的部分隐藏，接着将侧滑部分编写成一个组件，通过一个点击事件来触发显示和隐藏就可以了；
-
<div id="app">
-
<navbar>
-
<!-- 左边 -->
-
<div class="left" slot="left">
-
<img src="/static/模块管理.png" @click="handleLeft"/>
-
<button v-show="false">按钮
</button>
-
</div>
-
<!-- 中间 -->
-
<div class="center" slot="center">
-
<span>标题
</span>
-
</div>
-
<!-- 右边 -->
-
<div class="right" slot="right">
-
<button>按钮
</button>
-
<img src="/static/分享.png" />
-
</div>
-
</navbar>
-
-
<left v-show="isShow">
</left>
-
</div>
-
<script>
-
Vue.component("navbar",{
-
template:`
-
<div class="navbar">
-
<slot name="left">
</slot>
-
</div>
-
`
-
})
-
Vue.component("left",{
-
template:`
-
<div class="leftMenu">
-
<ul>
-
<li> 个人信息
</li>
-
<li> 我的文件
</li>
-
<li> 我的收藏
</li>
-
<li> 我的订阅
</li>
-
</ul>
-
</div>
-
`
-
})
-
new Vue({
-
el:'#app',
-
data:{isShow:false},
-
methods:{
-
handleLeft(){
-
this.isShow = !this.isShow
-
}
-
}
-
})
-
</script>
本篇就记录了 slot 的相关，需要知道的即使 slot 有单个slot名称即<slot>会将插槽内容全部显示出来除去有具体的slot，即<slot="left">，还有就是父组件模板的内容在父组件作用域内编译；子组件模板的内容会在子组件作用域内编译；
当然以上的内容是旧版本当中的slot（Vue2.6之前），在下一篇内容当中会来讲到新的插槽语法（Vue2.6开始）；附上地址：插槽 — Vue.js ，感谢大家的支持！
转载：https://blog.csdn.net/weixin_52203618/article/details/127692542