一丶为什么使用slot
(一)slot翻译为插槽
- 在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽
- 插槽的目的是让我们原来的设备具有更多的扩展性
- 比如电脑的USB我们可以插入U盘,硬盘,手机,音响,键盘,鼠标等
(二)组件的插槽
- 组件的插槽也是为了让我们封装的组件更具有扩展性
- 让使用者可以决定组件内部的一些内容到底展示什么
(三)例子:移动网站中的导航栏
- 移动开发中,几乎每个页面都有导航栏
- 导航栏我们必然会封装成一个插件,比如nav-bar组件
- 一旦有了这个组件,我们就可以在多个页面中复用
二丶如何封装这类插件呢?slot
(一)如何去封装这类的组件呢?
- 它们也很多区别,但是也有很多共性
- 如果,我们每一个单独去封装一个组件,显然不合适
- 比如每个页面都返回,这部分内容我们就要重复去封装
- 但是,如果我们封装成一个,好像也不合理
- 有些左侧是菜单,有些是返回,有些中间是搜索,有些事文字等等
(二)如何封装合适呢?抽取共性,保留不同
- 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
- 是搜索框,还是文字,还是菜单,由调用者自己来决定
(三)这就是使用slot的意义所在
三丶案例代码
<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/12/4 10:07-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.插槽的基本使用,<slot></slot>-->
<!--2.插槽的默认值 <slot>button</slot>-->
<!--3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素-->
<div id="app">
<cpn>
<button>按钮</button>
</cpn>
<cpn>
<i>呵呵呵</i>
<div>我是DIV元素</div>
<p>我是段落</p>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是key</h2>
<p>我是内容</p>
<slot></slot>
<hr>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
</body>
</html>