Vue.js——slot-插槽的基本使用——2020.12.7

Blockchain_Key發表於2020-12-07
Vue.js

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>

四丶執行結果

在這裡插入圖片描述

——仰天大笑出門去，我輩豈是蓬蒿人——

相關文章