slot-插槽的基本使用
- 一丶为什么使用slot
- 二丶如何封装这类插件呢&＃xff1f;slot
- 三丶案例代码
- 四丶运行结果
- ——仰天大笑出门去&＃xff0c;我辈岂是蓬蒿人——
一丶为什么使用slot
&＃xff08;一&＃xff09;slot翻译为插槽
- 在生活中很多地方都有插槽&＃xff0c;电脑的USB插槽&＃xff0c;插板当中的电源插槽
- 插槽的目的是让我们原来的设备具有更多的扩展性
- 比如电脑的USB我们可以插入U盘&＃xff0c;硬盘&＃xff0c;手机&＃xff0c;音响&＃xff0c;键盘&＃xff0c;鼠标等
&＃xff08;二&＃xff09;组件的插槽
- 组件的插槽也是为了让我们封装的组件更具有扩展性
- 让使用者可以决定组件内部的一些内容到底展示什么
&＃xff08;三&＃xff09;例子&＃xff1a;移动网站中的导航栏
- 移动开发中&＃xff0c;几乎每个页面都有导航栏
- 导航栏我们必然会封装成一个插件&＃xff0c;比如nav-bar组件
- 一旦有了这个组件&＃xff0c;我们就可以在多个页面中复用
二丶如何封装这类插件呢&＃xff1f;slot
&＃xff08;一&＃xff09;如何去封装这类的组件呢&＃xff1f;
- 它们也很多区别&＃xff0c;但是也有很多共性
- 如果&＃xff0c;我们每一个单独去封装一个组件&＃xff0c;显然不合适
- 比如每个页面都返回&＃xff0c;这部分内容我们就要重复去封装
- 但是&＃xff0c;如果我们封装成一个&＃xff0c;好像也不合理
- 有些左侧是菜单&＃xff0c;有些是返回&＃xff0c;有些中间是搜索&＃xff0c;有些事文字等等
&＃xff08;二&＃xff09;如何封装合适呢&＃xff1f;抽取共性&＃xff0c;保留不同
- 最好的封装方式就是将共性抽取到组件中&＃xff0c;将不同暴露为插槽
- 一旦我们预留了插槽&＃xff0c;就可以让使用者根据自己的需求&＃xff0c;决定插槽中插入什么内容
- 是搜索框&＃xff0c;还是文字&＃xff0c;还是菜单&＃xff0c;由调用者自己来决定
&＃xff08;三&＃xff09;这就是使用slot的意义所在
三丶案例代码
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Titletitle>
head>
<body>
<div id&＃61;"app"><cpn><button>按钮button>cpn><cpn><i>呵呵呵i><div>我是DIV元素div><p>我是段落p>cpn><cpn>cpn>
div><template id&＃61;"cpn"><div><h2>我是keyh2><p>我是内容p><slot>slot><hr>div>
template>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>const app &＃61; new Vue({el:"#app",data:{},components:{cpn:{template:&＃39;#cpn&＃39;}}})
script>
body>
html>
四丶运行结果
——仰天大笑出门去&＃xff0c;我辈岂是蓬蒿人——
京公网安备 11010802041100号