slot-插槽的基本使用
- 一丶為什么使用slot
- 二丶如何封裝這類插件呢？slot
- 三丶案例代碼
- 四丶運行結果
- ——仰天大笑出門去，我輩豈是蓬蒿人——
一丶為什么使用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>
四丶運行結果
——仰天大笑出門去，我輩豈是蓬蒿人——
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232054.html
標籤：其他
上一篇：CSS3 轉換、文本陰影