目錄

• 1、為什麼使用slot
• 1.1 slot(插槽)
• 1.2 元件中的插槽
• 1.3 例子
• 2、如何封裝這類元件（slot）
• 3、 插槽的案例
• 4、插槽預設值
• 5、具名插槽
• 6、編譯作用域
• 7、作用域插槽

1、為什麼使用slot

1.1 slot(插槽)

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

1.2 元件中的插槽

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

1.3 例子

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

2、如何封裝這類元件（slot）

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

3、 插槽的案例

<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"></script>
<script>
  const app = new Vue({
    el: "#app",components: {
      "cpn": {
        template: `#cpn`,}
    }
  })
</script>

上述程式碼幹了以下事情：

• 1.定義了子元件cpn，然後在子元件中預留了一個插槽，插槽的內容由使用者填寫
• 2.父元件中使用了3次子元件，3個子元件分別給插槽填寫了不同的內容

最後展示效果如下：

4、插槽預設值

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

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

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

5、具名插槽

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

<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:插槽的名字

6、編譯作用域

通過外面傳給元件的變數，在以後使用插槽的時候是不能使用的

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p&gwww.cppcns.comt;hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",data: {
      isShow: true
    },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>


7、作用域插槽

預設在插槽中的程式碼只能使用全域性Vue中的屬性，如果想要使用自定義元件中的屬性，那麼需要在定義slot的時候使用v-bind來進行繫結。

<disrDsshv id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<temp程式設計客棧late id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",data(){
          return{
            "user": {
              "firstName": "甲","lastname": www.cppcns.com"殼蟲"
            }
          }
        }
      }
    }
  })
</script>

上述程式碼做了如下幾件事情:

• 1.定義了子元件cpn，在子元件中定義了user
• 2.在子元件cpn的模板的插程式設計客棧槽中綁定了屬性data，且插槽的預設值為user.lastname

• 3.在html中使用了子元件，並使用v-slot綁定了插槽Prop物件，這樣就可以通過物件名稱.子元件中繫結的屬性名稱(slot.data)，來訪問子元件中的資料

到此這篇關於Vue slot插槽的使用詳情的文章就介紹到這了,更多相關Vue slot插槽的使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！