1. 概念
slot
翻译为插槽
为什么使用slot?
- 组件的插槽也是为了让我们封装的组件预留一些空间,更加具有扩展性。
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
2. slot 的基本使用
- 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
- 在子组件中,使用特殊的元素
<slot>
就可以为子组件开启一个插槽。 <slot></slot>
中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容
<div id="app">
<cpn></cpn>
<cpn>
<h3>啦啦啦啦</h3>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件的标题</h2>
<slot>
<p>我是组件的默认内容</p>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
},
components: {
cpn: {
template: '#cpn'
}
}
});
</script>
3. 具名插槽
当子组件的功能复杂时,子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。
- 那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
- 这个时候,我们就需要给插槽起一个名字
如何使用具名插槽呢?非常简单,只要给 slot 元素一个 name 属性即可<slot name='myslot'></slot>
,一个不带 name 的 <slot>
出口会带有隐含的名字 “default”
具名插槽自 2.6.0 起有所更新,vue官网推荐使用
v-slot
指令。官网截图:
<template id="cpn">
<div>
<slot name="header">我是页面默认头部</slot>
<slot></slot>
<slot name="footer">我是页面默认底部</slot>
</div>
</template>
在向具名插槽提供内容的时候,我们可以在一个 <template>
元素上使用 v-slot
指令,并以 v-slot
的参数的形式提供其名称:
<div id="app">
<cpn>
<template v-slot:header>
<h1>页面头部标题</h1>
</template>
<p>页面中间内容</p>
<template v-slot:footer>
<h1>页面底部标题</h1>
</template>
</cpn>
</div>
注意 v-slot
只能添加在 <template>
上 (只有一种例外情况)
具名插槽的缩写
2.6.0 新增
跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:
) 替换为字符 #
。例如 v-slot:header
可以被重写为 #header