Vue（14）slot插槽的使用

為什么使用slot

 

slot(插槽)

• 在生活中很多地方都有插槽，電腦usb的插槽，插板當中的電源插槽
• 插槽的目的是為了讓我們原來的設備具備更多的擴展性
• 比如電腦的USB我們可以插入U盤，手機，鼠標，鍵盤等等
   

組件中的插槽

• 組件的插槽也是為了讓我們的組件更具有擴展性
• 讓使用者決定組件內部的一些內容到底展示什么
   

例子

• 移動開發中，幾乎每個頁面都有導航欄
• 導航欄我們必然封裝成一個插件
• 一旦有了這個組件，我們就可以在多個頁面中復用了
   

如何封裝這類組件（slot）

• 最好的封裝方式就是將共性抽取到組件中，將不同的部分暴露為插槽
• 一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什么內容
• 是搜索框，是文字，是按鈕，由調度者自己決定
   

插槽的案例

<div id="app">
  <cpn><button>按鈕</button></cpn>
  <cpn><p>hello world</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是組件</h2>
    // 插槽預留的位置，方便使用者自己填寫
    <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
      }
    }
  })
</script>

上述代碼干了以下事情
1.定義了子組件cpn，然后在子組件中預留了一個插槽，插槽的內容由用戶填寫
2.父組件中使用了3次子組件，3個子組件分別給插槽填寫了不同的內容

最后展示效果如下

 

插槽默認值

如果我們需要大量使用這個組件，而且組件預留的插槽，我們大多數都是填寫的返回按鈕，只有極少數填寫其他的，那么這種情況就可以為插槽設置一個默認值

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot><button>返回</button></slot>
  </div>
</template>

我們在子組件中設置了一個默認值為返回按鈕的插槽，那么父組件在使用時如果不填寫任何內容，那么默認就是返回按鈕
 

具名插槽

有時我們需要多個插槽。例如對於一個帶有如下模板的組件：

<template id="cpn">
  <div>
    <slot name="header"><span>頭部</span></slot>
    <slot name="main"><span>中間</span></slot>
    <slot name="footer"><span>頁腳</span></slot>
  </div>
</template>

我們在組件中預留了3個插槽，但是這里指定了3個名字，后續父組件使用v-slot指定name屬性后就能填寫自己的內容，比如如下代碼

<div id="app">
  <cpn>
    <template v-slot:header>
      <p>header頭部</p>
    </template>
    <template v-slot:footer>
      <p>footer頁腳</p>
    </template>
  </cpn>
</div>

使用了cpn組件，然后指定了插槽name屬性為header和footer的內容，指定后自己填寫的內容就會替換默認的內容。
注意：這里的語法格式是固定的，必須在使用template標簽上綁定v-slot:插槽的名字
 

編譯作用域

通過外面傳給組件的變量，在以后使用插槽的時候是不能使用的

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            isShow: false
          }
        }
      }
    }
  })
</script>

上面我們定義了子組件cpn，子組件中有屬性isShow，app實例中也定義了屬性isShow，最后使用子組件cpn時使用了v-show，當值為true顯示，值為false不顯示
問題：v-show中的isShow的值是實例中的true還是子組件中的false
答案：是true，因為你使用的時候是在app實例范圍內，所以isShow會去從實例中的data去查找，雖然你是在cpn子組件中綁定的，但是這里的cpn你只需要把他當做普通的標簽即可，如果你想讓isShow的值為false，那么你只需要在子組件的template模板中使用<p v-show="isShow">hello</p>
 

作用域插槽

默認在插槽中的代碼只能使用全局Vue中的屬性，如果想要使用自定義組件中的屬性，那么需要在定義slot的時候使用v-bind來進行綁定。

<div id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            "user": {
              "firstName": "甲",
              "lastname": "殼蟲"
            }
          }
        }
      }
    }
  })
</script>

上述代碼做了如下幾件事情
1.定義了子組件cpn，在子組件中定義了user
2.在子組件cpn的模板的插槽中綁定了屬性data，且插槽的默認值為user.lastname
3.在html中使用了子組件，並使用v-slot綁定了插槽Prop對象，這樣就可以通過對象名稱.子組件中綁定的屬性名稱(slot.data)，來訪問子組件中的數據